/* ============================================================================
 * tokens.css — Design-system foundation (Checkpoint 1)
 * "UI Revamped / Option 1" → no-build CSS custom properties.
 *
 * Source: the MD3 tailwind.config extracted in handoff/findings/013 (dark-only,
 * ~55 MD3 roles). DECISIONS honored here:
 *   - :root                = LIGHT palette (DERIVED — a design call, not in source),
 *                            because the app defaults light (styles.css :root == light).
 *   - dark override blocks = the SOURCE dark palette VERBATIM, under the SAME
 *                            selectors styles.css already uses so the existing
 *                            light/dark toggle keeps working:
 *                              @media (prefers-color-scheme: dark) :root:not([data-theme="light"])
 *                              :root[data-theme="dark"]
 *   - a back-compat ALIAS block re-points every variable the current styles.css
 *     consumes (--accent, --surface, .btn colours, …) onto the new tokens, so the
 *     live app re-skins without breakage before the C2 full re-skin.
 *
 * LOAD ORDER: this file loads AFTER styles.css (see index.html) so the alias
 * overrides win over styles.css's own :root / [data-theme] token definitions at
 * equal-or-greater specificity + later source order.
 * ==========================================================================*/

:root{
  /* ---- color · surfaces (LIGHT, derived) ---------------------------------
   * Inverted surface stack: near-white violet-tinted canvas; containers step
   * DARKER as elevation rises (lowest = pure white pop-out surface). */
  --background:#fdfbff;
  --surface:#fdfbff;
  --surface-dim:#ded8e0;
  --surface-bright:#ffffff;
  --surface-container-lowest:#ffffff;
  --surface-container-low:#f7f2fa;
  --surface-container:#f2ecf4;
  --surface-container-high:#ece6ee;
  --surface-container-highest:#e6e0e9;
  --surface-variant:#e7e0eb;
  /* recessed card/section surface (LIGHT) — a touch deeper than --background so panels
   * read as distinct sunken panels rather than blending into the page (req: C4 pass). */
  --surface-card:#f1ebf6;

  /* ---- color · text / lines (LIGHT) ---- */
  --on-surface:#1b1b1f;
  --on-background:#1b1b1f;
  --on-surface-variant:#49454e;
  --outline:#7a757f;
  --outline-variant:#cac4cf;
  --inverse-surface:#313033;
  --inverse-on-surface:#f3eff4;

  /* ---- color · primary (LIGHT — violet darkened for legibility on light) ---- */
  --primary:#6d3bd7;                 /* deep violet: WCAG-AA with #fff for CTAs */
  --on-primary:#ffffff;
  --primary-container:#e9ddff;       /* light violet fill */
  --on-primary-container:#22005d;    /* deep violet text on the fill */
  --inverse-primary:#d0bcff;         /* the dark theme's primary, used inverse */
  --surface-tint:#6d3bd7;

  /* ---- color · secondary (LIGHT — cyan darkened) ---- */
  --secondary:#00687a;
  --on-secondary:#ffffff;
  --secondary-container:#acedff;
  --on-secondary-container:#001f26;

  /* ---- color · tertiary (LIGHT — mint darkened) ---- */
  --tertiary:#00875a;
  --on-tertiary:#ffffff;
  --tertiary-container:#a8f2cd;
  --on-tertiary-container:#002114;

  /* ---- color · error (LIGHT — MD3 standard) ---- */
  --error:#ba1a1a;
  --on-error:#ffffff;
  --error-container:#ffdad6;
  --on-error-container:#410002;

  /* ---- color · warning (INVENTED — no warn role exists in source) ---- */
  --warning:#7d5700;                 /* dark amber for text/AA on light */
  --on-warning:#ffffff;
  --warning-container:#ffdea8;
  --on-warning-container:#271900;

  /* ---- color · MD3 "fixed" roles (constant across light & dark by MD3 spec) ---- */
  --primary-fixed:#e9ddff;   --primary-fixed-dim:#d0bcff;
  --on-primary-fixed:#23005c;--on-primary-fixed-variant:#5516be;
  --secondary-fixed:#acedff; --secondary-fixed-dim:#4cd7f6;
  --on-secondary-fixed:#001f26;--on-secondary-fixed-variant:#004e5c;
  --tertiary-fixed:#6ffbbe;  --tertiary-fixed-dim:#4edea3;
  --on-tertiary-fixed:#002113;--on-tertiary-fixed-variant:#005236;

  /* ---- typography · families ---- */
  --font-display:"Geist","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ---- typography · size roles (size / line-height / weight / letter-spacing) ---- */
  /* Cockpit scale: bumped ~15% from the source's compact spec for full-viewport desktop legibility,
   * then bumped again (C·appwide pass) — the app still read small with too much empty margin at
   * full-viewport widths, so every role steps up ~6-8% more here. Single source of truth: every
   * consumer (t-* utility classes, .ui-* primitives, and now the bare h1/h2/h3 + body base below)
   * reads off these vars, so this one edit is the whole "bigger type" pass. */
  --fs-display-hero:50px;  --lh-display-hero:58px;  --fw-display-hero:700; --ls-display-hero:-0.03em;
  --fs-display-hero-mobile:36px; --lh-display-hero-mobile:44px; --fw-display-hero-mobile:700; --ls-display-hero-mobile:-0.02em;
  --fs-headline-lg:33px;   --lh-headline-lg:41px;   --fw-headline-lg:600; --ls-headline-lg:-0.02em;
  --fs-headline-md:25px;   --lh-headline-md:33px;   --fw-headline-md:600; --ls-headline-md:-0.015em;
  --fs-headline-sm:19px;   --lh-headline-sm:27px;   --fw-headline-sm:600; --ls-headline-sm:-0.01em;
  --fs-body-lg:18px;       --lh-body-lg:27px;       --fw-body-lg:400;
  --fs-body-md:16px;       --lh-body-md:24px;       --fw-body-md:400;
  --fs-body-sm:14px;       --lh-body-sm:21px;       --fw-body-sm:400;
  --fs-code-lg:16px;       --lh-code-lg:23px;       --fw-code-lg:500;
  --fs-code-md:14px;       --lh-code-md:21px;       --fw-code-md:400;
  --fs-code-sm:13px;       --lh-code-sm:18px;       --fw-code-sm:400;
  --fs-label-caps:12.5px;  --lh-label-caps:17px;    --fw-label-caps:600; --ls-label-caps:0.06em;
  --fs-badge-status:13.5px;--lh-badge-status:17px;  --fw-badge-status:500;

  /* ---- spacing ---- */
  --space-xs:0.25rem; --space-sm:0.5rem; --space-md:1rem; --space-lg:1.5rem; --space-xl:2.25rem;
  --gutter:1rem; --gutter-compact:0.75rem; --margin:1.5rem; --margin-mobile:1rem;

  /* ---- radius ---- */
  --radius:0.25rem; --radius-lg:0.5rem; --radius-xl:0.75rem; --radius-2xl:1rem; --radius-full:9999px;

  /* ---- shadow / elevation (LIGHT) ---- */
  --shadow-soft:0 1px 2px rgba(16,19,29,.06),0 1px 3px rgba(16,19,29,.08);
  --shadow-md:0 4px 12px rgba(16,19,29,.10),0 1px 3px rgba(16,19,29,.06);
  --shadow-2xl:0 24px 48px -12px rgba(16,19,29,.24);
  --shadow-inner:inset 0 1px 2px rgba(16,19,29,.06);
  /* signature "glow" shadows — tokenized from the source in-body literals
   * (violet 160,120,255 / cyan 76,215,246 / mint 78,222,163 / error 255,180,171).
   * Softer on light where glows read poorly; full strength in the dark block. */
  --shadow-glow-primary:0 0 16px rgba(109,59,215,.28);
  --shadow-glow-primary-strong:0 0 22px rgba(109,59,215,.42);
  --shadow-glow-secondary:0 0 16px rgba(0,104,122,.22);
  --shadow-glow-tertiary:0 0 16px rgba(0,135,90,.22);
  --shadow-glow-error:0 0 16px rgba(186,26,26,.22);

  /* ---- scrim (modal backdrop) — MD3 scrim role is a constant black wash in
   * both themes; the modal PANEL's own elevated surface + border + shadow is
   * what needs to differ per theme (below), not the scrim tint. ---- */
  --scrim:rgba(0,0,0,.55);

  /* ---- motion ---- */
  --dur-fast:150ms; --dur-med:300ms; --dur-slow:500ms;
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-emphasized:cubic-bezier(.3,0,.8,.15);

  /* ======================================================================
   * BACK-COMPAT ALIASES (LIGHT) — every variable current styles.css consumes,
   * re-pointed onto the new tokens so the live app re-skins in place.
   * (styles.css references: --bg --surface --surface-2 --line --ink --ink-2
   *  --muted --accent --accent-ink --accent-soft --accent-soft-2 --brand-teal
   *  --good --good-soft --warn --warn-soft --crit --crit-soft --info --info-soft
   *  --shadow --r --r-s)
   * ==================================================================== */
  --bg:var(--background);
  --surface:var(--surface-card);            /* cards/sections sit on the recessed card surface */
  --surface-2:var(--surface-container);
  --line:var(--outline-variant);
  --ink:var(--on-surface);
  --ink-2:var(--on-surface-variant);
  --muted:var(--outline);
  --accent:var(--primary);                  /* #6d3bd7 — safe with the #fff .btn.primary hardcodes */
  --accent-ink:var(--on-primary-container);
  --accent-soft:#efe6ff;
  --accent-soft-2:#f7f2ff;
  --brand-teal:var(--secondary);
  --good:var(--tertiary);   --good-soft:#cdf3e0;
  --warn:var(--warning);    --warn-soft:var(--warning-container);
  --crit:var(--error);      --crit-soft:var(--error-container);
  --info:var(--secondary);  --info-soft:#d3f3fb;
  --shadow:var(--shadow-soft);
  --r:var(--radius-2xl);    --r-s:var(--radius-xl);
}

/* ============================================================================
 * DARK — the SOURCE MD3 palette VERBATIM (hex from 013 / tailwind.config).
 * Duplicated under both selectors styles.css uses so the toggle + OS pref both
 * flip, and so these later, equally-specific rules win over styles.css's own
 * dark blocks.  "fixed" roles are intentionally NOT redefined (constant).
 * ==========================================================================*/
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --background:#0f131d; --surface:#0f131d; --surface-dim:#0f131d; --surface-bright:#353944;
    --surface-container-lowest:#0a0e18; --surface-container-low:#171b26; --surface-container:#1c1f2a;
    --surface-container-high:#262a35; --surface-container-highest:#313540; --surface-variant:#313540;
    /* recessed card/section surface (DARK) — slightly DARKER than --background (#0f131d): a sunken panel. */
    --surface-card:#0c0e19;
    --on-surface:#dfe2f1; --on-background:#dfe2f1; --on-surface-variant:#cbc3d7;
    --outline:#958ea0; --outline-variant:#494454; --inverse-surface:#dfe2f1; --inverse-on-surface:#2c303b;
    --primary:#d0bcff; --on-primary:#3c0091; --primary-container:#a078ff; --on-primary-container:#340080;
    --inverse-primary:#6d3bd7; --surface-tint:#d0bcff;
    --secondary:#4cd7f6; --on-secondary:#003640; --secondary-container:#03b5d3; --on-secondary-container:#00424e;
    --tertiary:#4edea3; --on-tertiary:#003824; --tertiary-container:#00a572; --on-tertiary-container:#00311f;
    --error:#ffb4ab; --on-error:#690005; --error-container:#93000a; --on-error-container:#ffdad6;
    /* invented warning (dark) */
    --warning:#ffca6f; --on-warning:#442b00; --warning-container:#6b4d00; --on-warning-container:#ffdea8;

    /* shadows (dark — source soft literal + full-strength glows verbatim) */
    --shadow-soft:0 1px 8px rgba(0,0,0,.30);
    --shadow-md:0 4px 16px rgba(0,0,0,.45);
    --shadow-2xl:0 24px 60px -12px rgba(0,0,0,.65);
    --shadow-inner:inset 0 1px 2px rgba(0,0,0,.35);
    --shadow-glow-primary:0 0 16px rgba(160,120,255,.35);
    --shadow-glow-primary-strong:0 0 22px rgba(160,120,255,.55);
    --shadow-glow-secondary:0 0 16px rgba(76,215,246,.30);
    --shadow-glow-tertiary:0 0 16px rgba(78,222,163,.30);
    --shadow-glow-error:0 0 16px rgba(255,180,171,.25);

    /* scrim stays the same constant black wash in dark (MD3 scrim role) —
     * restated explicitly here (not just inherited from :root) so it is never
     * the one color with just a single, easy-to-miss definition. */
    --scrim:rgba(0,0,0,.55);

    /* aliases (dark) — theme-correct: soft tints go dark, "ink" accents go light */
    --bg:var(--background); --surface:var(--surface-card); --surface-2:var(--surface-container);
    --line:var(--outline-variant); --ink:var(--on-surface); --ink-2:var(--on-surface-variant); --muted:var(--outline);
    --accent:var(--inverse-primary);          /* #6d3bd7 — safe with #fff .btn.primary */
    --accent-ink:var(--primary);              /* #d0bcff — light violet text on dark */
    --accent-soft:#241a3a; --accent-soft-2:#1b1530;
    --brand-teal:var(--secondary);
    --good:var(--tertiary);   --good-soft:#123024;
    --warn:var(--warning);    --warn-soft:#3a2d10;
    --crit:var(--error);      --crit-soft:#3a1512;
    --info:var(--secondary);  --info-soft:#0c2f38;
    --shadow:var(--shadow-soft);
    --r:var(--radius-2xl);    --r-s:var(--radius-xl);
  }
}
:root[data-theme="dark"]{
  --background:#0f131d; --surface:#0f131d; --surface-dim:#0f131d; --surface-bright:#353944;
  --surface-container-lowest:#0a0e18; --surface-container-low:#171b26; --surface-container:#1c1f2a;
  --surface-container-high:#262a35; --surface-container-highest:#313540; --surface-variant:#313540;
  --surface-card:#0c0e19;
  --on-surface:#dfe2f1; --on-background:#dfe2f1; --on-surface-variant:#cbc3d7;
  --outline:#958ea0; --outline-variant:#494454; --inverse-surface:#dfe2f1; --inverse-on-surface:#2c303b;
  --primary:#d0bcff; --on-primary:#3c0091; --primary-container:#a078ff; --on-primary-container:#340080;
  --inverse-primary:#6d3bd7; --surface-tint:#d0bcff;
  --secondary:#4cd7f6; --on-secondary:#003640; --secondary-container:#03b5d3; --on-secondary-container:#00424e;
  --tertiary:#4edea3; --on-tertiary:#003824; --tertiary-container:#00a572; --on-tertiary-container:#00311f;
  --error:#ffb4ab; --on-error:#690005; --error-container:#93000a; --on-error-container:#ffdad6;
  --warning:#ffca6f; --on-warning:#442b00; --warning-container:#6b4d00; --on-warning-container:#ffdea8;

  --shadow-soft:0 1px 8px rgba(0,0,0,.30);
  --shadow-md:0 4px 16px rgba(0,0,0,.45);
  --shadow-2xl:0 24px 60px -12px rgba(0,0,0,.65);
  --shadow-inner:inset 0 1px 2px rgba(0,0,0,.35);
  --shadow-glow-primary:0 0 16px rgba(160,120,255,.35);
  --shadow-glow-primary-strong:0 0 22px rgba(160,120,255,.55);
  --shadow-glow-secondary:0 0 16px rgba(76,215,246,.30);
  --shadow-glow-tertiary:0 0 16px rgba(78,222,163,.30);
  --shadow-glow-error:0 0 16px rgba(255,180,171,.25);

  --scrim:rgba(0,0,0,.55);

  --bg:var(--background); --surface:var(--surface-card); --surface-2:var(--surface-container);
  --line:var(--outline-variant); --ink:var(--on-surface); --ink-2:var(--on-surface-variant); --muted:var(--outline);
  --accent:var(--inverse-primary);
  --accent-ink:var(--primary);
  --accent-soft:#241a3a; --accent-soft-2:#1b1530;
  --brand-teal:var(--secondary);
  --good:var(--tertiary);   --good-soft:#123024;
  --warn:var(--warning);    --warn-soft:#3a2d10;
  --crit:var(--error);      --crit-soft:#3a1512;
  --info:var(--secondary);  --info-soft:#0c2f38;
  --shadow:var(--shadow-soft);
  --r:var(--radius-2xl);    --r-s:var(--radius-xl);
}