/* ============================================================
   Tocker — Color tokens
   Deep navy foundation + electric green signal.
   Base palette (raw values) followed by semantic aliases.
   ============================================================ */

:root {
  /* ---- Navy scale (the brand anchor) ---- */
  --navy-950: #07111F; /* Deep Time Navy — hero / app base */
  --navy-900: #0B1B2B; /* Tocker Navy — primary brand, dark surface */
  --navy-800: #102A44; /* Orbit Navy — elevated card on dark */
  --navy-700: #16395B; /* hover / pressed dark surface */
  --navy-600: #203A58; /* dark divider */

  /* ---- Green signal ---- */
  --green-300: #C8FF5A; /* accent hover on navy */
  --green-400: #B6FF2E; /* Tocker Signal — primary accent on navy */
  --green-600: #0F7A3B; /* accessible green action on light */
  --green-700: #0B5F30; /* strong accessible green on light */

  /* ---- Neutrals ---- */
  --white:     #FFFFFF;
  --cloud-50:  #F6F9FC; /* light app background */
  --mist-100:  #E8EFF7; /* muted panel / light border */
  --mist-200:  #D8E2EF; /* light divider */
  --slate-400: #8A99AD; /* tertiary text on light */
  --slate-500: #607086; /* Planning Slate — secondary text on light */
  --ink-950:   #081526; /* Ink — primary text on light */

  /* ---- Dark-theme text ---- */
  --cloud-200: #C7D3E3; /* secondary text on navy */
  --cloud-300: #93A4BC; /* tertiary text on navy */

  /* ---- Status (functional) ---- */
  --red-500:    #FF6B6B; /* error on dark */
  --red-700:    #B42318; /* error on light */
  --amber-400:  #FFD166; /* warning on dark */
  --amber-700:  #8A5A00; /* warning on light */
  --amber-bg:   #FFF4E0; /* risk callout bg (light) */

  /* ---- Translucent signal (glow / rings) ---- */
  --signal-08: rgba(182, 255, 46, 0.08);
  --signal-16: rgba(182, 255, 46, 0.16);
  --signal-22: rgba(182, 255, 46, 0.22);
  --signal-40: rgba(182, 255, 46, 0.40);

  /* ============================================================
     SEMANTIC ALIASES — default theme is LIGHT.
     Override under [data-theme="dark"] below.
     ============================================================ */
  --bg:            var(--cloud-50);
  --surface:       var(--white);
  --surface-raised:var(--white);
  --surface-sunken:var(--mist-100);

  --text:          var(--ink-950);
  --text-muted:    var(--slate-500);
  --text-subtle:   var(--slate-400);
  --text-inverse:  var(--white);

  --border:        var(--mist-200);
  --border-strong: var(--slate-400);

  /* Brand element = navy on light, action green = accessible green */
  --brand:         var(--navy-900);
  --accent:        var(--green-700);   /* readable green for text/links on light */
  --accent-hover:  var(--green-600);
  --signal:        var(--green-400);   /* decorative neon — only safe on navy */

  --focus-ring:    var(--green-400);

  --success:       var(--green-700);
  --warning:       var(--amber-700);
  --danger:        var(--red-700);

  /* On-accent text */
  --on-brand:      var(--white);
  --on-signal:     var(--navy-950);
}

/* ============================================================
   DARK THEME — calm cockpit, navy surfaces, neon signal
   ============================================================ */
[data-theme="dark"] {
  --bg:            var(--navy-950);
  --surface:       var(--navy-900);
  --surface-raised:var(--navy-800);
  --surface-sunken:var(--navy-950);

  --text:          var(--white);
  --text-muted:    var(--cloud-200);
  --text-subtle:   var(--cloud-300);
  --text-inverse:  var(--ink-950);

  --border:        var(--navy-600);
  --border-strong: var(--navy-700);

  --brand:         var(--green-400);
  --accent:        var(--green-400);   /* neon is safe on navy */
  --accent-hover:  var(--green-300);
  --signal:        var(--green-400);

  --focus-ring:    var(--green-400);

  --success:       var(--green-400);
  --warning:       var(--amber-400);
  --danger:        var(--red-500);

  --on-brand:      var(--navy-950);
  --on-signal:     var(--navy-950);
}