/* FaseZero · Color tokens
   Generated from the FaseZero Brand Book. Do not hardcode hex in components; use these vars. */

:root {
  /* ========================================================================
     COLORS — raw scales
     ======================================================================== */

  /* Brand greens — the hierarchy per the brand book:                       */
  /*   PRIMARY  = Mid-green  #128054 (leads, used for readable elements)      */
  /*   ANCHOR   = Forest     #09402A (weight, anchors)                        */
  /*   HIGHLIGHT= Mint       #24FEA5 (spark, NEVER use for readable text/btns)*/
  /*   SOFT     = #6FFFC7 (illustration); TINT = #EDFFF7 (washes)             */
  --brand-mid:    rgb(18, 128, 84);     /* PRIMARY  — the lead green        */
  --brand-forest: rgb(9, 64, 42);       /* ANCHOR   — dark, structural      */
  --brand-mint:   rgb(36, 254, 165);    /* HIGHLIGHT— spark / accents only   */
  --brand-soft:   rgb(111, 255, 199);   /* ILLUSTRATION fill                  */
  --brand-tint:   rgb(237, 255, 247);   /* WASH                               */

  /* Full ramps for tooling — prefer the named brand-mid/forest/mint above.   */
  --brand-main: rgb(36, 254, 165);     /* alias of brand-mint                */
  --brand-50:   rgb(237, 255, 247);    /* alias of brand-tint                */
  --brand-100:  rgb(213, 255, 239);
  --brand-200:  rgb(174, 255, 222);
  --brand-300:  rgb(111, 255, 199);    /* alias of brand-soft                */
  --brand-500:  rgb(0, 232, 138);
  --brand-600:  rgb(0, 194, 110);
  --brand-700:  rgb(0, 151, 89);
  --brand-800:  rgb(18, 128, 84);      /* alias of brand-mid                 */
  --brand-900:  rgb(7, 91, 57);
  --brand-950:  rgb(9, 64, 42);        /* alias of brand-forest              */

  /* Neutrals — "Ink" is the brand's anchor dark, NEVER pure black.           */
  --ink:           rgb(43, 43, 43);    /* #2B2B2B — brand book Ink-900       */
  --neutral-white: rgb(255, 255, 255);
  --neutral-50:    rgb(244, 244, 244);
  --neutral-100:   rgb(233, 234, 234);
  --neutral-200:   rgb(212, 213, 213);
  --neutral-300:   rgb(190, 191, 191);
  --neutral-400:   rgb(169, 170, 170);
  --neutral-500:   rgb(147, 149, 148);
  --neutral-600:   rgb(126, 128, 127);
  --neutral-700:   rgb(105, 107, 106);
  --neutral-800:   rgb(83, 85, 84);
  --neutral-900:   rgb(62, 64, 63);
  --neutral-950:   rgb(40, 43, 42);    /* "black" — never pure #000 */

  /* ACCENTS — named exactly as the brand book defines them.                  */
  /* Royal     — STRUCTURE · LINKS  — #3150EC                                 */
  /* Indigo    — DEPTH                — #4B56A5                                 */
  /* Violet    — DECK ACCENT (deep)  — #330074                                 */
  /* Violet Lt — DECK ACCENT          — #812AF2                                 */
  /* Coral     — HEAT                 — #FF6B6B                                 */
  /* Warning   — HEAT (caution)       — #F2C94C                                 */
  --royal:       rgb(49, 80, 236);      /* #3150EC */
  --royal-soft:  rgb(157, 180, 240);    /* gradient partner */
  --indigo:      rgb(75, 86, 165);      /* #4B56A5 */
  --violet:      rgb(51, 0, 116);       /* #330074 */
  --violet-lt:   rgb(129, 42, 242);     /* #812AF2 */
  --coral:       rgb(255, 107, 107);    /* #FF6B6B */
  --warning:     rgb(242, 201, 76);     /* #F2C94C */

  /* Lighter shades for backgrounds (per accents "flex further, lighter for bg") */
  --royal-50:   rgb(229, 234, 253);
  --indigo-50:  rgb(232, 234, 244);
  --violet-50:  rgb(243, 232, 252);
  --coral-50:   rgb(255, 235, 235);
  --warning-50: rgb(254, 247, 220);

  /* Aliases retained for back-compat with earlier extracted tokens.           */
  --navy-500:    var(--royal);
  --zenith-500:  var(--violet-lt);
  --magenta-500: rgb(218, 52, 110);    /* retained from UI Design tokens     */
  --yellow-500:  var(--warning);

  /* Semantic — Error / Heat (Coral is the brand's heat color)                */
  --error-50:  rgb(255, 235, 235);
  --error-500: var(--coral);
  --error-600: rgb(240, 87, 87);
  --error-950: rgb(69, 10, 10);

  /* Semantic — Warning (Mustard) */
  --warning-100: rgb(255, 240, 199);
  --warning-600: var(--warning);
  --warning-950: rgb(68, 50, 6);

  /* Signature gradients — always lean to one side, never 50/50.              */
  --gradient-mint-royal:  linear-gradient(135deg, #24FEA5 0%, #3150EC 100%); /* @kind color */
  --gradient-mint-forest: linear-gradient(135deg, #24FEA5 0%, #09402A 100%); /* @kind color */
  --gradient-soft-indigo: linear-gradient(135deg, #6FFFC7 0%, #9DB4F0 100%); /* @kind color */

  /* Opacity utilities — built on Ink, not pure black */
  --black-a05: rgba(0, 18, 10, 0.05);
  --black-a10: rgba(40, 43, 42, 0.10);
  --black-a15: rgba(40, 43, 42, 0.15);
  --black-a20: rgba(40, 43, 42, 0.20);
  --black-a50: rgba(40, 43, 42, 0.50);
  --black-a70: rgba(40, 43, 42, 0.70);
  --white-a00: rgba(255, 255, 255, 0);
  --white-a05: rgba(255, 255, 255, 0.05);
  --white-a10: rgba(255, 255, 255, 0.10);
  --white-a70: rgba(255, 255, 255, 0.70);

  /* ========================================================================
     SEMANTIC COLOR TOKENS — light theme (default)
     ======================================================================== */

  /* Surfaces */
  --bg-canvas:    var(--neutral-white);
  --bg-subtle:    var(--neutral-50);
  --bg-muted:     var(--neutral-100);
  --bg-inverted:  var(--neutral-950);

  /* Foregrounds */
  --fg-1:         var(--neutral-950);        /* primary text          */
  --fg-2:         var(--neutral-800);        /* secondary text        */
  --fg-3:         var(--neutral-600);        /* tertiary / captions   */
  --fg-4:         var(--neutral-400);        /* disabled / placeholder*/
  --fg-on-brand:  var(--neutral-950);        /* dark text on mint     */
  --fg-on-dark:   var(--neutral-white);
  --fg-link:      var(--navy-600);
  --fg-link-hover:var(--navy-700);

  /* Borders */
  --border-subtle:  var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-400);
  --border-focus:   var(--brand-500);

  /* Interactive */
  --action-primary:        var(--neutral-950);   /* PRIMARY ACTION IS BLACK */
  --action-primary-hover:  var(--brand-800);     /* dark mint on hover     */
  --action-primary-press:  var(--brand-900);
  --action-on-primary:     var(--neutral-white);
  --action-secondary:      var(--neutral-white);
  --action-secondary-stroke: var(--neutral-950);
  --action-secondary-hover:var(--neutral-50);
  --action-accent:         var(--brand-500);     /* mint pill accent       */
  --action-accent-hover:   var(--brand-600);

  /* Status */
  --status-success-bg: var(--brand-50);
  --status-success-fg: var(--brand-800);
  --status-error-bg:   var(--error-50);
  --status-error-fg:   var(--error-600);
  --status-warning-bg: var(--warning-50);
  --status-warning-fg: var(--warning-950);
  --status-info-bg:    var(--navy-50);
  --status-info-fg:    var(--navy-700);
  --status-ai-bg:      var(--zenith-50);
  --status-ai-fg:      var(--zenith-500);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(0, 232, 138, 0.35);

  /* Royal / Violet ramps — the accents referenced by the semantic tokens above. */
  --navy-50:     rgb(229, 234, 253);
  --navy-300:    rgb(157, 180, 240);
  --navy-500:    var(--royal);
  --navy-600:    rgb(40, 66, 200);
  --navy-700:    rgb(33, 54, 165);
  --zenith-50:   rgb(243, 232, 252);
  --zenith-200:  rgb(211, 180, 250);
  --zenith-500:  var(--violet-lt);
}

/* ============================================================================
   DARK THEME
   ============================================================================ */
:root[data-theme="dark"], .dark {
  --bg-canvas:    var(--neutral-950);
  --bg-subtle:    var(--neutral-900);
  --bg-muted:     var(--neutral-800);
  --bg-inverted:  var(--neutral-white);

  --fg-1:         var(--neutral-50);
  --fg-2:         var(--neutral-300);
  --fg-3:         var(--neutral-400);
  --fg-4:         var(--neutral-600);
  --fg-on-brand:  var(--neutral-950);
  --fg-on-dark:   var(--neutral-white);
  --fg-link:      var(--brand-300);
  --fg-link-hover:var(--brand-200);

  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.22);

  --action-primary:        var(--brand-500);
  --action-primary-hover:  var(--brand-main);
  --action-primary-press:  var(--brand-600);
  --action-secondary:      var(--neutral-white);
  --action-secondary-hover:var(--neutral-100);

  --status-success-bg: rgba(0, 232, 138, 0.12);
  --status-success-fg: var(--brand-300);
  --status-error-bg:   rgba(255, 107, 107, 0.12);
  --status-error-fg:   var(--error-500);
  --status-warning-bg: rgba(241, 195, 75, 0.12);
  --status-warning-fg: var(--warning-600);
  --status-info-bg:    rgba(96, 142, 250, 0.12);
  --status-info-fg:    var(--navy-300);
  --status-ai-bg:      rgba(154, 85, 244, 0.14);
  --status-ai-fg:      var(--zenith-200);

  --focus-ring: 0 0 0 3px rgba(36, 254, 165, 0.35);

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:  0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 24px 60px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 0 1px var(--brand-500), 0 8px 32px rgba(36, 254, 165, 0.35);
}