/* ============================================================
   Route Star — Color tokens
   Evergreen primary · warm sand neutrals · fresh "signal" green
   Premium, high-contrast, light-first.
   ============================================================ */

:root {
  /* ---- Brand evergreen ramp ---- */
  --green-50:  #ECF6F0;
  --green-100: #CFE9DC;
  --green-200: #A3D2BD;
  --green-300: #6FB597;
  --green-400: #3C9772;
  --green-500: #1B7A55;
  --green-600: #0E5E42;  /* primary brand */
  --green-700: #0B4A35;
  --green-800: #0A3B2B;
  --green-900: #082E22;  /* deep ink-green (nav, headers) */
  --green-950: #052018;

  /* ---- Signal: positive / success green (completed, paid, en-route) ---- */
  --signal-50:  #E7F8F0;
  --signal-200: #A6ECCB;
  --signal-300: #7BE3AE;
  --signal-400: #43CE8A;
  --signal-500: #16B877;  /* positive / success */
  --signal-600: #0E9A62;

  /* ---- Amber gold: the primary ACTION accent (CTAs; use sparingly) ---- */
  --amber-50:  #FCF3DC;
  --amber-300: #F4C95A;
  --amber-400: #EFB733;
  --amber-500: #E8A317;  /* accent */
  --amber-600: #C9890E;
  --amber-700: #9C6B07;

  /* ---- Warm sand / cream neutrals ---- */
  --sand-50:  #FAF8F2;
  --sand-100: #F3EEE3;
  --sand-200: #E9E1CF;
  --sand-300: #D9CDB4;

  /* ---- Cool ink / gray (text, borders, surfaces) ---- */
  --ink-950: #0C1611;  /* strongest headings */
  --ink-900: #11201A;
  --ink-800: #1C2A24;
  --ink-700: #33423B;  /* body text */
  --ink-500: #5E6E66;  /* muted text */
  --ink-400: #87958E;  /* placeholder / disabled */
  --ink-300: #B7C2BC;
  --ink-200: #DBE2DD;  /* default border */
  --ink-100: #EAEFEB;  /* hairline */
  --ink-50:  #F4F7F5;  /* subtle surface */

  --white: #FFFFFF;
  --black: #000000;

  /* ---- Semantic hues ---- */
  --success-50:  #E7F8F0;
  --success-500: #16B877;
  --success-600: #0E9A62;
  --success-700: #0B7A4E;

  --warning-50:  #FCEDD7;
  --warning-500: #E08600;
  --warning-600: #BE7000;
  --warning-700: #8F5400;

  --danger-50:  #FBEAE8;
  --danger-500: #DD4B42;
  --danger-600: #C8453C;
  --danger-700: #A2352E;

  --info-50:  #E7F0FC;
  --info-500: #3B7BE0;
  --info-600: #2C6FD6;
  --info-700: #1F56AB;

  /* ---- Data-viz sequence (route/ops dashboards) ---- */
  --viz-1: #0E5E42; /* evergreen */
  --viz-2: #16B877; /* signal */
  --viz-3: #3B7BE0; /* info blue */
  --viz-4: #E5A100; /* amber */
  --viz-5: #6FB597; /* sage */
  --viz-6: #C8453C; /* clay red */

  /* ============================================================
     Semantic aliases — reference these in product, not raw ramps
     ============================================================ */

  /* Surfaces */
  --surface-page:    var(--sand-50);   /* warm airy app background */
  --surface-card:    var(--white);
  --surface-sunken:  var(--ink-50);    /* wells, inset panels */
  --surface-raised:  var(--white);
  --surface-muted:   var(--sand-100);  /* secondary warm panels */
  --surface-brand:   var(--green-600);
  --surface-brand-strong: #0E4233; /* lifted deep green — nav / sidebars / dark slides (not near-black) */
  --surface-accent-soft:  var(--signal-50);
  --surface-overlay: rgba(8, 30, 24, 0.48); /* scrims */

  /* Text */
  --text-strong:   var(--ink-950);
  --text-body:     var(--ink-700);
  --text-muted:    var(--ink-500);
  --text-subtle:   var(--ink-400);
  --text-on-brand: var(--sand-50);
  --text-on-accent:var(--green-950);
  --text-link:     var(--green-600);
  --text-brand:    var(--green-700);

  /* Borders */
  --border-subtle:  var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-brand:   var(--green-600);
  --border-focus:   var(--signal-500);

  /* Interactive / brand action */
  --brand:            var(--green-600);
  --brand-hover:      var(--green-700);
  --brand-active:     var(--green-800);
  --accent:           var(--amber-500);
  --accent-hover:     var(--amber-600);

  /* Focus ring */
  --ring: 0 0 0 3px color-mix(in srgb, var(--signal-500) 36%, transparent);
  --ring-brand: 0 0 0 3px color-mix(in srgb, var(--green-600) 24%, transparent);

  /* Semantic text/surface pairs */
  --text-success: var(--success-700);
  --text-warning: var(--warning-700);
  --text-danger:  var(--danger-700);
  --text-info:    var(--info-700);
  --surface-success: var(--success-50);
  --surface-warning: var(--warning-50);
  --surface-danger:  var(--danger-50);
  --surface-info:    var(--info-50);
}