/*
 * FROZEN DESIGN TOKENS
 *
 * Components may consume semantic tokens from this file, but must not add
 * colour literals of their own. Changes to this file require design review.
 */
@layer tokens {
  :root {
    --violet-200: #cfc7ff;
    --violet-300: #a79bff;
    --violet-400: #8b7cf6;
    --violet-500: #6e5ae8;
    --violet-600: #5b45d6;
    --violet-700: #4a35b8;
    --indigo-950: #0f0c37;

    --ink-1000: #08070f;
    --ink-950: #0b0a14;
    --ink-900: #100e1c;
    --ink-850: #141223;
    --ink-800: #1b1830;
    --ink-700: #272341;

    --slate-500: #6b6786;
    --slate-400: #8b87a6;
    --slate-300: #ada9c4;

    --paper-0: #ffffff;
    --paper-50: #faf9fc;
    --paper-100: #f3f1f8;
    --paper-200: #e7e4f0;
    --paper-300: #d6d2e4;

    --jade-400: #5be49b;
    --jade-700: #0e7a48;
    --amber-400: #f0b354;
    /* Darkened from #9a6410 so light --warn clears 4.5:1 against --bg-sunken
       (paper-100 was 4.46:1); still 3:1+ contrast headroom against every
       light background. See spec/assets/token_contrast_spec.rb. */
    --amber-700: #8f5d0f;
  }

  :root,
  [data-theme-pref="light"] {
    color-scheme: light;
    --bg: var(--paper-50);
    --bg-sunken: var(--paper-100);
    --bg-raised: var(--paper-0);
    --bg-overlay: var(--paper-0);
    --bg-code: #fbfafe;
    --border: var(--paper-200);
    --border-strong: var(--paper-300);
    --border-accent: #c9bffa;
    --text: var(--indigo-950);
    --text-muted: #4e4a66;
    --text-faint: var(--slate-500);
    --accent: var(--violet-600);
    --accent-hover: var(--violet-700);
    --accent-text: var(--violet-600);
    --accent-on: #ffffff;
    --accent-soft: rgba(91, 69, 214, 0.08);
    --ok: var(--jade-700);
    --warn: var(--amber-700);
    --sx-punct: #9691ae;
    --sx-key: var(--violet-600);
    --sx-str: #0e7a6b;
    --sx-num: #9a6410;
    --sx-flag: #6b6786;
    --sx-cmd: var(--indigo-950);
    --sx-url: #1f5fae;
    --glow-a: rgba(110, 90, 232, 0.12);
    --glow-b: rgba(203, 196, 255, 0.4);
    --sheen: rgba(110, 90, 232, 0.1);
    --shadow-lift: 0 1px 2px rgba(15, 12, 55, 0.04), 0 30px 60px -28px rgba(15, 12, 55, 0.22);
    --cta-bg: linear-gradient(160deg, #ece8fb 0%, #f8f7fc 70%);
  }

  [data-theme-pref="dark"] {
    color-scheme: dark;
    --bg: var(--ink-950);
    --bg-sunken: var(--ink-1000);
    --bg-raised: var(--ink-900);
    --bg-overlay: var(--ink-850);
    --bg-code: var(--ink-1000);
    --border: #211e38;
    --border-strong: #2e2a4a;
    --border-accent: #3a2f7a;
    --text: #edebf5;
    --text-muted: var(--slate-300);
    /* Was var(--slate-500) (#6b6786): 3.43-3.73:1 against dark backgrounds,
       below the 4.5:1 WCAG 1.4.3 floor. slate-400 clears 5.3-5.8:1 against
       every dark background while staying visually fainter than
       --text-muted (slate-300). See spec/assets/token_contrast_spec.rb. */
    --text-faint: var(--slate-400);
    --accent: var(--violet-500);
    --accent-hover: var(--violet-400);
    --accent-text: var(--violet-300);
    --accent-on: #ffffff;
    --accent-soft: rgba(110, 90, 232, 0.14);
    --ok: var(--jade-400);
    --warn: var(--amber-400);
    --sx-punct: var(--slate-500);
    --sx-key: var(--violet-300);
    --sx-str: #8fd7c0;
    --sx-num: var(--amber-400);
    --sx-flag: var(--slate-400);
    --sx-cmd: #edebf5;
    --sx-url: #9fc7ff;
    --glow-a: rgba(110, 90, 232, 0.26);
    --glow-b: rgba(15, 12, 55, 0.95);
    --sheen: rgba(255, 255, 255, 0.1);
    --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 30px 70px -24px rgba(0, 0, 0, 0.85);
    --cta-bg: linear-gradient(160deg, #17133f 0%, #0b0a14 65%);
  }

  @media (prefers-color-scheme: dark) {
    [data-theme-pref="system"] {
      color-scheme: dark;
      --bg: var(--ink-950);
      --bg-sunken: var(--ink-1000);
      --bg-raised: var(--ink-900);
      --bg-overlay: var(--ink-850);
      --bg-code: var(--ink-1000);
      --border: #211e38;
      --border-strong: #2e2a4a;
      --border-accent: #3a2f7a;
      --text: #edebf5;
      --text-muted: var(--slate-300);
      /* Keep in sync with [data-theme-pref="dark"] above: slate-400 fixes
         the 1.4.3 contrast failure. See spec/assets/token_contrast_spec.rb. */
      --text-faint: var(--slate-400);
      --accent: var(--violet-500);
      --accent-hover: var(--violet-400);
      --accent-text: var(--violet-300);
      --accent-on: #ffffff;
      --accent-soft: rgba(110, 90, 232, 0.14);
      --ok: var(--jade-400);
      --warn: var(--amber-400);
      --sx-punct: var(--slate-500);
      --sx-key: var(--violet-300);
      --sx-str: #8fd7c0;
      --sx-num: var(--amber-400);
      --sx-flag: var(--slate-400);
      --sx-cmd: #edebf5;
      --sx-url: #9fc7ff;
      --glow-a: rgba(110, 90, 232, 0.26);
      --glow-b: rgba(15, 12, 55, 0.95);
      --sheen: rgba(255, 255, 255, 0.1);
      --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 30px 70px -24px rgba(0, 0, 0, 0.85);
      --cta-bg: linear-gradient(160deg, #17133f 0%, #0b0a14 65%);
    }
  }
}