/* ==========================================================================
   LexAid — Color tokens
   CI colors (the ONLY brand hues):
   Navy #082849 · Teal #5dc7bb · Purple #aa56e7 · Blue #54a9f1 · White #ffffff
   Every tint/shade below is derived FROM these CI colors via color-mix (the
   same hue, lighter or darker) — no new/foreign hues are introduced.
   ========================================================================== */

:root {
  /* ---- Brand core (raw CI values) ---------------------------------------- */
  --lx-navy:        #082849;   /* primary brand color — "Lex" */
  --lx-teal:        #5dc7bb;   /* primary accent — "Aid" */
  --lx-purple:      #aa56e7;   /* gradient accent — sparkle */
  --lx-blue:        #54a9f1;   /* gradient accent — sparkle */
  --lx-white:       #ffffff;

  /* ---- Navy scale — CI navy, only darkened/lightened --------------------- */
  --navy-900: color-mix(in srgb, var(--lx-navy) 82%, #000);
  --navy-800: var(--lx-navy);                                  /* CI navy */
  --navy-700: color-mix(in srgb, var(--lx-navy) 88%, #fff);
  --navy-600: color-mix(in srgb, var(--lx-navy) 80%, #fff);
  --navy-500: color-mix(in srgb, var(--lx-navy) 68%, #fff);
  --navy-400: color-mix(in srgb, var(--lx-navy) 54%, #fff);
  --navy-300: color-mix(in srgb, var(--lx-navy) 40%, #fff);
  --navy-200: color-mix(in srgb, var(--lx-navy) 26%, #fff);
  --navy-100: color-mix(in srgb, var(--lx-navy) 14%, #fff);
  --navy-50:  color-mix(in srgb, var(--lx-navy) 7%,  #fff);

  /* ---- Teal scale — CI teal, only darkened/lightened --------------------- */
  --teal-700: color-mix(in srgb, var(--lx-teal) 70%, #000);
  --teal-600: color-mix(in srgb, var(--lx-teal) 86%, #000);
  --teal-500: var(--lx-teal);                                  /* CI teal */
  --teal-400: color-mix(in srgb, var(--lx-teal) 78%, #fff);
  --teal-300: color-mix(in srgb, var(--lx-teal) 58%, #fff);
  --teal-200: color-mix(in srgb, var(--lx-teal) 38%, #fff);
  --teal-100: color-mix(in srgb, var(--lx-teal) 18%, #fff);

  /* ---- Purple / Blue — CI values, used only in gradients & glows --------- */
  --purple-500: var(--lx-purple);
  --purple-400: color-mix(in srgb, var(--lx-purple) 78%, #fff);
  --blue-500:   var(--lx-blue);
  --blue-400:   color-mix(in srgb, var(--lx-blue) 78%, #fff);

  /* ---- Neutrals — all derived from CI navy over white (no foreign grays) - */
  --white:   var(--lx-white);
  --paper:   color-mix(in srgb, var(--lx-navy) 4%,  #fff);   /* light section bg */
  --mist:    color-mix(in srgb, var(--lx-navy) 8%,  #fff);   /* halftone tint */
  --line-100:color-mix(in srgb, var(--lx-navy) 12%, #fff);
  --line-200:color-mix(in srgb, var(--lx-navy) 20%, #fff);
  --ink-500: color-mix(in srgb, var(--lx-navy) 60%, #fff);   /* muted body text */
  --ink-700: color-mix(in srgb, var(--lx-navy) 80%, #fff);

  /* ---- Functional status colors -----------------------------------------
     Outside the CI palette on purpose — reserved strictly for system feedback
     (success / warning / error), never for brand/decorative use. Info reuses
     the CI blue. */
  --success: #2fae7a;
  --warning: #e9a23b;
  --danger:  #e05a5a;
  --info:    var(--blue-500);

  /* ======================================================================
     SEMANTIC ALIASES — reference these in components, not raw values
     ====================================================================== */

  /* Surfaces */
  --surface-page:      var(--white);
  --surface-page-alt:  var(--paper);
  --surface-tint:      var(--mist);
  --surface-card:      var(--white);
  --surface-dark:      var(--navy-800);
  --surface-dark-deep: var(--navy-900);
  --surface-inverse:   var(--navy-800);

  /* Text on light */
  --text-strong:  var(--navy-800);
  --text-body:    var(--ink-700);
  --text-muted:   var(--ink-500);
  --text-accent:  var(--teal-600);
  --text-link:    var(--blue-500);

  /* Text on dark — ONLY white or teal/mint (readability rule) */
  --text-on-dark:        var(--white);
  --text-on-dark-muted:  rgba(255,255,255,0.72);
  --text-on-dark-accent: var(--teal-500);

  /* Lines & borders */
  --border-subtle:   var(--line-100);
  --border-default:  var(--line-200);
  --border-on-dark:  rgba(255,255,255,0.22);

  /* Interactive accent */
  --accent:          var(--teal-500);
  --accent-strong:   var(--teal-600);
  --accent-contrast: var(--navy-800);   /* text on a teal fill */
  --focus-ring:      var(--blue-500);
}