/* ==========================================================================
   Entwine — Color tokens
   Aligned to the Ecosystem Intelligence Dashboard: a bright, saturated blue
   primary, a neutral cool-gray ramp, and a full semantic accent + status
   system (the KPI cards carry colored accents; states use solid pills).
   Base values first, semantic aliases second.
   ========================================================================== */

:root {
  /* ---- Brand: Blue (primary) ------------------------------------------- */
  /* The vivid "Accept"-button blue and the logo mark's bright blue. */
  --blue-50:  #EFF6FF;
  --blue-100: #DBEAFE;
  --blue-200: #BFDBFE;
  --blue-300: #93C5FD;
  --blue-400: #60A5FA;
  --blue-500: #3B82F6;   /* bright accents, sparklines */
  --blue-600: #2563EB;   /* primary — buttons, links, active */
  --blue-700: #1D4ED8;   /* primary hover */
  --blue-800: #1E40AF;   /* primary pressed */
  --blue-900: #1E3A8A;
  --blue-950: #172554;

  /* ---- Brand: Teal (secondary) ----------------------------------------- */
  --teal-50:  #F0FDFA;
  --teal-100: #CCFBF1;
  --teal-200: #99F6E4;
  --teal-300: #5EEAD4;
  --teal-400: #2DD4BF;
  --teal-500: #14B8A6;   /* secondary — ECS accent */
  --teal-600: #0D9488;
  --teal-700: #0F766E;
  --teal-800: #115E59;
  --teal-900: #134E4A;
  --teal-950: #042F2E;

  /* ---- Neutral: cool gray ramp (slate-ish, lightly cool) --------------- */
  --ink-0:   #FFFFFF;
  --ink-25:  #F7F8FA;   /* app canvas */
  --ink-50:  #F1F3F6;   /* sunken wells */
  --ink-100: #E9ECF1;   /* subtle borders */
  --ink-200: #DEE2E8;   /* default borders */
  --ink-300: #C6CCD6;
  --ink-400: #99A1AE;   /* subtle text */
  --ink-500: #6B7280;   /* muted text */
  --ink-600: #4B5563;
  --ink-700: #374151;   /* body text */
  --ink-750: #2B3442;
  --ink-800: #1F2733;
  --ink-900: #141A22;
  --ink-950: #0E131A;   /* deepest ink */

  /* ---- Semantic status scales ------------------------------------------ */
  --green-500:  #16A34A;
  --green-600:  #15803D;
  --green-50:   #ECFDF3;
  --amber-500:  #F59E0B;
  --amber-600:  #D97706;
  --amber-50:   #FFFBEB;
  --red-500:    #DC2626;
  --red-600:    #B91C1C;
  --red-50:     #FEF2F2;
  --sky-500:    #0EA5E9;
  --sky-50:     #F0F9FF;

  /* ======================================================================
     Semantic aliases — reference these in components, not raw scales.
     ====================================================================== */

  /* Primary / secondary intent */
  --color-primary:        var(--blue-600);
  --color-primary-hover:  var(--blue-700);
  --color-primary-active: var(--blue-800);
  --color-primary-subtle: var(--blue-50);
  --color-secondary:       var(--teal-500);
  --color-secondary-hover: var(--teal-600);
  --color-secondary-subtle:var(--teal-50);

  /* Text */
  --text-strong:   var(--ink-900);   /* headlines, big numbers */
  --text-body:     var(--ink-700);   /* default copy */
  --text-muted:    var(--ink-500);   /* secondary copy */
  --text-subtle:   var(--ink-400);   /* captions, meta, eyebrows */
  --text-on-brand: #FFFFFF;
  --text-link:     var(--blue-600);

  /* Surfaces */
  --surface-page:     var(--ink-25);
  --surface-card:     var(--ink-0);
  --surface-sunken:   var(--ink-50);
  --surface-raised:   var(--ink-0);
  --surface-inverse:  var(--ink-950);
  --surface-brand:    var(--blue-600);
  --surface-brand-soft: var(--blue-50);

  /* Borders / dividers */
  --border-subtle:  var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-brand:   var(--blue-600);
  --ring-focus:     color-mix(in srgb, var(--blue-600) 35%, transparent);

  /* Status semantic — solid + soft pairs (drives the status pills) */
  --status-success: var(--green-500);
  --status-success-soft: var(--green-50);
  --status-warning: var(--amber-500);
  --status-warning-soft: var(--amber-50);
  --status-danger:  var(--red-500);
  --status-danger-soft: var(--red-50);
  --status-info:    var(--blue-600);
  --status-info-soft: var(--blue-50);

  /* KPI accent set — the colored accent on each metric card
     (CDE = blue, CSI = green, ECS = teal, Network = amber). */
  --accent-cde:     var(--blue-600);
  --accent-csi:     var(--green-500);
  --accent-ecs:     var(--teal-500);
  --accent-network: var(--amber-500);

  /* Signature gradient — the logo mark's bright cyan→blue sweep. Accents,
     brand moments, sparkline fills. Never behind body text. */
  --gradient-brand: linear-gradient(135deg, #38BDF8 0%, #3B82F6 45%, #2563EB 100%);  /* @kind color */
  --gradient-brand-deep: linear-gradient(160deg, #1E3A8A 0%, #0E131A 100%);  /* @kind color */
}