/* ============================================================
   SCPS — Color tokens
   Teal-forward system: teal #2a9d8f is the single dominant
   brand color, white the primary surface. The former navy
   ramp is now a DEEP-TEAL "ink" ramp — it drives every dark
   surface, dark text and secondary control, so the whole
   system reads teal without touching each component.
     • Teal  #2a9d8f  (the "S" mark)  -> --teal-500
   Blue is intentionally rare (~5%): the original brand navy
   survives ONLY in the `--info` status tokens.
   ============================================================ */

:root {
  /* ---- Brand: Teal (primary) ---- */
  --teal-50:  #e8fbf7;
  --teal-100: #d0f4ed;
  --teal-200: #b1e8de;
  --teal-300: #83d2c5;
  --teal-400: #52b8aa;
  --teal-500: #2a9d8f; /* BRAND — exact */
  --teal-600: #188276;
  --teal-700: #16665c;
  --teal-800: #164d46;
  --teal-900: #103530;

  /* ---- Ink: Deep Teal (was Navy — now teal-toned) ----
     Same lightness structure as before so all contrast holds;
     hue pulled to teal so "dark" surfaces & ink read on-brand.
     Variable names kept as --navy-* so every existing
     reference re-themes automatically. ---- */
  --navy-50:  #e7f4f2;
  --navy-100: #cfe9e5;
  --navy-200: #a6d5ce;
  --navy-300: #72bab0;
  --navy-400: #429b8f;
  --navy-500: #2b7d73;
  --navy-600: #21645c;
  --navy-700: #184f48;
  --navy-800: #103a35;
  --navy-900: #0a2723;

  /* ---- Blue (rare ~5% accent — the original brand navy,
     kept for informational status only) ---- */
  --blue-50:  #eef3fb;
  --blue-500: #3e5c85;
  --blue-600: #2b4a73;
  --blue-700: #1c3b63;

  /* ---- Neutrals (cool gray, hue-matched to navy) ---- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f8fafd;
  --neutral-100: #f1f4f8;
  --neutral-200: #e3e8ed;
  --neutral-300: #d0d5dc;
  --neutral-400: #9ea4ab;
  --neutral-500: #767c84;
  --neutral-600: #575d64;
  --neutral-700: #3f444b;
  --neutral-800: #272a30;
  --neutral-900: #14171c;
  --neutral-950: #0a0c10;

  /* ---- Gold (supporting accent — DERIVED, see readme) ---- */
  --gold-400: #e1c076;
  --gold-500: #d0ac5f;
  --gold-600: #b18c45;

  /* ---- Semantic hues ---- */
  --green-50:  #e4f8e7;
  --green-500: #2e9e52;
  --green-700: #0a6d37;
  --amber-50:  #fff3db;
  --amber-500: #efa831;
  --amber-700: #b46d10;
  --red-50:    #ffedeb;
  --red-500:   #ea3c3f;
  --red-700:   #b7191c;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components, not the
     raw ramp steps above.
     ============================================================ */

  /* Brand shortcuts */
  --brand:           var(--teal-500);
  --brand-hover:     var(--teal-600);
  --brand-active:    var(--teal-700);
  --brand-ink:       var(--navy-700);   /* navy used as primary ink */
  --brand-ink-hover: var(--navy-800);
  --accent:          var(--gold-500);

  /* Surfaces */
  --surface-page:    var(--neutral-50);
  --surface-card:    var(--neutral-0);
  --surface-sunken:  var(--neutral-100);
  --surface-inverse: var(--navy-700);
  --surface-brand-subtle: var(--teal-50);
  --surface-ink-subtle:   var(--navy-50);

  /* Text */
  --text-primary:    var(--navy-800);
  --text-secondary:  var(--neutral-600);
  --text-tertiary:   var(--neutral-500);
  --text-disabled:   var(--neutral-400);
  --text-on-brand:   var(--neutral-0);
  --text-on-inverse: var(--neutral-0);
  --text-link:       var(--teal-600);

  /* Borders & dividers */
  --border-subtle:   var(--neutral-200);
  --border-default:  var(--neutral-300);
  --border-strong:   var(--neutral-400);
  --border-brand:    var(--teal-500);
  --ring-focus:      color-mix(in srgb, var(--teal-500) 55%, transparent);

  /* Status */
  --success:     var(--green-500);
  --success-bg:  var(--green-50);
  --success-ink: var(--green-700);
  --warning:     var(--amber-500);
  --warning-bg:  var(--amber-50);
  --warning-ink: var(--amber-700);
  --danger:      var(--red-500);
  --danger-bg:   var(--red-50);
  --danger-ink:  var(--red-700);
  --info:        var(--blue-600);
  --info-bg:     var(--blue-50);
  --info-ink:    var(--blue-700);
}