/* ============================================================
   BioTrends EM — COLOR TOKENS
   Source of truth: official "Signature" + "Depth" gradients.
   Signature: #032B47 · #045788 · #0E86C0 · #28AFE2 · #57C2F0
   Depth:     #22B1E0 · #05233E
   Primary UI brand color: #0E86C0 (mid bright blue, matches logo outline).
   ============================================================ */

:root {
  /* ---- Brand blue scale (anchored on the Signature gradient) ---- */
  --bt-blue-950: #03204A; /* deepest navy — signature start, dark surfaces */
  --bt-blue-900: #05233E; /* depth dark */
  --bt-blue-800: #073a66;
  --bt-blue-700: #044F88; /* signature 2 — strong navy-blue */
  --bt-blue-600: #0E86C0; /* PRIMARY brand color */
  --bt-blue-500: #1A9BD4;
  --bt-blue-400: #28AFE2; /* signature 4 — bright accent */
  --bt-blue-300: #57C2F0; /* signature 5 — light accent */
  --bt-blue-200: #A6DDF7;
  --bt-blue-100: #D6EFFB;
  --bt-blue-50:  #EEF8FE;

  --bt-teal-400: #22B1E0; /* depth gradient bright */

  /* ---- Neutrals (cool, very slightly navy-tinted) ---- */
  --bt-ink-950: #0B1623;
  --bt-ink-900: #0E1B2A;
  --bt-ink-800: #1C2C3C;
  --bt-ink-700: #2A3B4D;
  --bt-ink-600: #415467;
  --bt-ink-500: #5A6B7B;
  --bt-ink-400: #8595A3;
  --bt-ink-300: #AEBBC6;
  --bt-ink-200: #D5DDE4;
  --bt-ink-150: #E1E8ED;
  --bt-ink-100: #E8EDF1;
  --bt-ink-50:  #F4F7F9;
  --bt-white:   #FFFFFF;

  /* ---- Semantic status (mapped to EM alert/action logic) ---- */
  --bt-pass:        #168F5E; /* in spec / no growth / approved */
  --bt-pass-bg:     #E5F4ED;
  --bt-pass-border: #B6E0CC;

  --bt-alert:        #E08A1E; /* alert level reached (warning) */
  --bt-alert-bg:     #FBF0DD;
  --bt-alert-border: #F2D5A3;

  --bt-action:        #CE3B36; /* action level exceeded (critical) */
  --bt-action-bg:     #FBE9E8;
  --bt-action-border: #F2C0BD;

  --bt-info:        var(--bt-blue-600);
  --bt-info-bg:     var(--bt-blue-50);
  --bt-info-border: var(--bt-blue-200);

  /* ---- Categorical data-viz (restrained, blue-led) ---- */
  --bt-cat-1: #0E86C0; /* brand blue */
  --bt-cat-2: #03204A; /* navy */
  --bt-cat-3: #22B1E0; /* teal */
  --bt-cat-4: #5A8FB0; /* slate blue */
  --bt-cat-5: #6E7CA8; /* muted indigo */
  --bt-cat-6: #C99A4B; /* muted ochre (single warm nod to logo stripe) */

  /* ---- Signature gradients (the brand's primary visual signature) ---- */
  --bt-gradient-signature: linear-gradient(120deg, #032B47 0%, #045788 32%, #0E86C0 62%, #28AFE2 84%, #57C2F0 100%); /* @kind color */
  --bt-gradient-signature-h: linear-gradient(90deg, #032B47 0%, #045788 28%, #0E86C0 58%, #28AFE2 82%, #57C2F0 100%); /* @kind color */
  --bt-gradient-depth: linear-gradient(135deg, #05233E 0%, #0E86C0 55%, #22B1E0 100%); /* @kind color */
  --bt-gradient-soft: linear-gradient(135deg, #EEF8FE 0%, #D6EFFB 100%); /* @kind color */
  --bt-gradient-light: linear-gradient(96deg, #0E86C0 0%, #28AFE2 50%, #57C2F0 100%); /* @kind color */

  /* ============================================================
     SEMANTIC ALIASES — use these in components, not raw scale.
     ============================================================ */
  --bt-primary:        var(--bt-blue-600);
  --bt-primary-hover:  #0B739E;   /* darker on hover */
  --bt-primary-active: #095F84;   /* darker still on press */
  --bt-primary-contrast: var(--bt-white);
  --bt-accent:         var(--bt-blue-400);

  --text-strong:   var(--bt-ink-900);
  --text-body:     var(--bt-ink-700);
  --text-muted:    var(--bt-ink-500);
  --text-subtle:   var(--bt-ink-400);
  --text-on-brand: var(--bt-white);
  --text-link:     var(--bt-blue-600);

  --surface-page:    #F6F9FB;
  --surface-card:    var(--bt-white);
  --surface-sunken:  var(--bt-ink-50);
  --surface-raised:  var(--bt-white);
  --surface-inverse: var(--bt-blue-950);
  --surface-brand-soft: var(--bt-blue-50);

  --border-subtle:  var(--bt-ink-150);
  --border-default: var(--bt-ink-200);
  --border-strong:  var(--bt-ink-300);

  --focus-ring: 0 0 0 3px rgba(40, 175, 226, 0.45);
}