/* ═══ Get Nova AI — design tokens ══════════════════════════════════════════
   One source for both themes. Light values match
   react-get-nova-ai-admin/src/scss/_tokens.scss so the marketing site and the
   admin portal share one vocabulary; this file extends it with the dark
   surfaces that _tokens.scss lacks (it "commits to the light theme").

   Dark values were derived mechanically by diffing the original index.html and
   dark.html bundles line by line — 610 colour literals aligned positionally
   with zero skew, yielding 50 distinct substitutions.

   ── Two things to know before editing ──────────────────────────────────────

   1. FOUR LITERALS WERE CONTEXT-DEPENDENT in the original. Each was one hex
      doing two jobs, so each is split into two tokens here. Find-and-replace
      on the raw hex WILL break the site:

        #0b0f22  -> ink text (x63)          vs. inverse surface (x7)
        #ffffff  -> card surface (x23)      vs. text on dark, unchanged (x35)
        #8b2fe0  -> accent text (x26)       vs. gradient stop, unchanged (x23)
        #545c7a  -> muted ink (x67)         vs. 3 JS chip styles (harmonised)

   2. #1f7bff NEVER CHANGES between themes. It appears 23x in both bundles and
      is only ever a gradient stop. The brand colour that does flip is
      --brand-text (#1a5fc2 -> #5faeff). Swapping these would recolour every
      button, progress bar, avatar and CTA gradient on the site.

   Channel triples (--*-rgb) exist so one token covers a colour at many alphas,
   written rgb(var(--ink-rgb) / .12). ~95 of the 50 substitutions were the same
   ink at 12 different alphas. --ink-rgb also feeds the canvas INK() helper in
   js/canvas/work-thumbs.js, which keeps CSS and canvas in lockstep.
   ════════════════════════════════════════════════════════════════════════ */

:root {
    color-scheme: light;

    /* ── Surfaces ── */
    --surface-page: #ebeff8;
    --surface-card: #ffffff;
    --surface-sunken: #f4f4f7;
    --surface-muted: #e7eaf2;
    --surface-raised: #f7f9fe;
    --surface-alt: #f7f8fc;
    --surface-tint: #eaeffa;
    --surface-inverse: #0b0f22;
    --surface-code: #0d1020;
    --surface-canvas: #ffffff;      /* panel fill inside work thumbnails */

    /* Always-dark bands. Invariant: they are already dark in both themes. */
    --surface-night: #090b18;
    --surface-night-deep: #040717;

    /* ── Ink ── */
    --ink: #0b0f22;
    --ink-body: #181d33;
    --ink-strong: #242a43;
    --ink-secondary: #3a4260;
    --ink-soft: #4a5270;
    --ink-muted: #545c7a;
    --ink-subtle: #5c6484;
    --ink-faint: #767e93;
    --ink-inverse: #ffffff;         /* text on dark bands — same in both themes */

    /* ── Brand ── */
    --brand: #1f7bff;               /* invariant — gradient stop, see note 2 */
    --brand-strong: #1663dc;        /* invariant */
    --brand-text: #1a5fc2;          /* flips */
    --accent: #8b2fe0;              /* invariant — gradient stop */
    --accent-strong: #7524c2;       /* invariant */
    --accent-text: #8b2fe0;         /* flips */

    /* Invariant accents: terminal chrome, hero ticker, status dots. The four
       --grad-* avatar stops were dropped on 2026-09-24 when the generated
       initial-tiles were replaced with real photographs. */
    --tint-violet: #cba8ff;
    --tint-blue: #6fb6ff;
    --link-blue: #1f6fe8;
    --status-ok: #3ddc97;
    --status-warn: #f5a623;
    --status-stop: #ff5f57;

    /* ── Channel triples ── */
    --ink-rgb: 11 15 34;
    --accent-rgb: 139 47 224;
    --scrim-rgb: 11 15 34;          /* photo overlays */
    --scrim-violet-rgb: 24 12 56;
    --surface-page-rgb: 235 239 248; /* sticky header backdrop */

    /* Alpha differs per theme, so these are whole values, not triples. */
    --accent-glow: rgb(var(--accent-rgb) / 0.4);
    --accent-wash: rgb(var(--accent-rgb) / 0.08);

    /* ── Derived ── */
    --border: rgb(var(--ink-rgb) / 0.12);
    --border-strong: rgb(var(--ink-rgb) / 0.16);
    --border-input: rgb(var(--ink-rgb) / 0.22);
    --hairline: rgb(var(--ink-rgb) / 0.08);
    --grid-line: rgb(var(--ink-rgb) / 0.053);
    --gradient-brand: linear-gradient(100deg, var(--brand), var(--accent));

    /* ── Type ── */
    --font-display: Sora, "Segoe UI", system-ui, sans-serif;
    --font-sans: Manrope, system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

    /* ── Radii ── */
    --radius-sm: 8px;
    --radius-md: 9px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --radius-2xl: 16px;
    --radius-pill: 999px;

    /* ── Layout ── */
    --page-max: 1240px;
    --page-gutter: clamp(18px, 4vw, 32px);
    --header-height: 70px;
    --nav-breakpoint: 1060px;       /* reference only; @media needs a literal */
}

/* Dark theme. Opt-in only.
 *
 * Light is the default for everyone, whatever their OS is set to: the site has
 * one look until a visitor asks for the other. That is why there is no
 * `@media (prefers-color-scheme: dark)` here - a media query would hand a
 * dark-preferring OS the dark theme unasked, which is the behaviour this
 * replaced.
 *
 * Applied by the pre-paint script in <head> (see partials/head.js) before first
 * paint, so switching back to a stored dark preference does not flash light. */
[data-theme="dark"] {
    color-scheme: dark;

    --surface-page: #0a0c14;
    --surface-card: #171b25;
    --surface-sunken: #11141c;
    --surface-muted: #d7dce8;
    --surface-raised: #171b25;
    --surface-alt: #1e2330;
    --surface-tint: #13172a;
    --surface-inverse: #05060c;
    --surface-code: #1b2030;
    --surface-canvas: #1b2030;

    --ink: #ffffff;
    --ink-body: #e6e9f0;
    --ink-strong: #d2d6e0;
    --ink-secondary: #aeb4c4;
    --ink-soft: #a6acbd;
    --ink-muted: #a8afc2;
    --ink-subtle: #9ba2b6;
    --ink-faint: #8a92a8;

    --brand-text: #5faeff;
    --accent-text: #b268ff;

    --ink-rgb: 255 255 255;
    --accent-rgb: 178 104 255;
    --scrim-rgb: 5 6 12;
    --scrim-violet-rgb: 20 10 48;
    --surface-page-rgb: 10 12 20;

    --accent-glow: rgb(var(--accent-rgb) / 0.5);
    --accent-wash: rgb(var(--accent-rgb) / 0.14);
}