/* ============================================================
   V2 Design Tokens — VeriLM
   ============================================================
   Canonical color/typography vocabulary from the V2 design
   handoff package (docs/design-handoff/DT template/...).
   Adopted per docs/reports/2026-04-30_v2-visual-adoption-plan.md.

   Iteration 1 (palette swap):
     - All 13 --vl-* tokens authored as the source of truth.
     - app.css aliases --accent-primary onto --vl-accent so the
       50+ existing references migrate transparently.
     - No font / spacing / layout work in this iteration.

   Future iterations consume more of these tokens.
   ============================================================ */

:root {
    /* Ink (text) */
    --vl-ink:        #1f2937;  /* primary text */
    --vl-ink-soft:   #3a4251;  /* secondary text, body copy */
    --vl-muted:      #8a8a93;  /* meta text, placeholders */
    --vl-line:       #2a2830;  /* high-contrast borders (reserved) */

    /* Surfaces */
    --vl-paper:      #ffffff;  /* panel backgrounds */
    --vl-panel:      #f3f1ec;  /* past-analysis header bg */
    --vl-bg:         #e9e4d6;  /* page bg behind the snapshot */

    /* Accent (brand purple) */
    --vl-accent:      #6b5df0;  /* primary purple — outlines, run button, gradient start */
    --vl-accent-ink:  #3d33a8;  /* purple on light surfaces (tag text, glyphs, citations) */
    --vl-accent-soft: #efedff;  /* tag pill bg, selected-row bg */
    --vl-accent-rgb:  107, 93, 240;  /* RGB triple for rgba() opacity composites */
    /* Deep accent for header surfaces — faded warm cream
       (vera-dark-mode-app-surface). Matches the rendered appearance of
       INACTIVE expert scorecard tiles (analysis_card.css:27 — opacity 0.55
       on #f6f0e4 cream over #f7f7f9 page bg ≈ #f6f3ed). Pre-blended to a
       solid value so headers and PROMPT pills read as faded cream chrome
       without dimming the dark text/glyphs inside via opacity. Dark mode
       uses #454545 (asymmetric — faded cream in light, neutral grey in
       dark per user preference). */
    --vl-accent-deep:     #f6f3ed;
    --vl-accent-deep-rgb: 246, 243, 237;
    /* Text/glyph color paired with --vl-accent-deep header bars. Dark
       text on warm-cream bar reads cleanly in light mode (~12:1 contrast);
       the dark-block override below pairs light text with the dark-grey bar. */
    --vl-accent-deep-ink: #1f2937;

    /* Status colors */
    --vl-verified:    #4a8a5c;  /* DR "verified" label */
    --vl-verified-rgb: 74, 138, 92;  /* RGB triple for rgba() composites (vera-dark-mode-app-surface) */
    --vl-unsupported: #d66a4a;  /* cancel button, "unsupported" label */
    --vl-unsupported-rgb: 214, 106, 74;  /* RGB triple for rgba() composites (vera-dark-mode-app-surface) */
    --vl-unresolved:  #a8a093;  /* DR "unresolved" label (reserved) */

    /* Header gradient — flat faded warm cream
       (vera-dark-mode-app-surface). Matches the rendered appearance of
       inactive expert scorecard tiles (analysis_card.css:27 — opacity
       0.55 on #f6f0e4 over #f7f7f9 ≈ #f6f3ed). Degenerate gradient
       (two identical stops) keeps the token type stable so downstream
       selectors don't need rewriting. Asymmetric with dark mode (which
       uses neutral grey) per user
       preference. */
    --vl-gradient-header: linear-gradient(90deg, #f6f3ed 0%, #f6f3ed 100%);

    /* Typography (V2 design package — Inter for sans, JetBrains Mono for code/chips).
       Iter 2: authored as the canonical font tokens. app.css aliases its
       legacy --font-sans / --font-mono onto these so existing references
       migrate transparently. */
    --vl-font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --vl-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Spacing scale (V2 design — literal pixels, no Tailwind/rem ratios).
       Iter 4: authored as the canonical spacing vocabulary. Used by surfaces
       touched in iter 1.5 / 3 (section bars, brand cards). Long-tail sweep
       across all of app.css's ~139 spacing literals deferred — token discipline
       earns its keep as future surfaces consume it. */
    --vl-space-1:  4px;
    --vl-space-2:  6px;
    --vl-space-3:  8px;
    --vl-space-4:  10px;
    --vl-space-5:  12px;
    --vl-space-6:  14px;
    --vl-space-7:  16px;
    --vl-space-8:  18px;
    --vl-space-9:  20px;
    --vl-space-10: 22px;
    --vl-space-11: 24px;
    --vl-space-12: 26px;
    --vl-space-13: 28px;
    --vl-space-14: 30px;

    /* Border radii (V2 design — four canonical values, named by role). */
    --vl-radius-pill:     4px;   /* tag pills, accuracy chips */
    --vl-radius-card:     8px;   /* cards, buttons, inputs */
    --vl-radius-section: 10px;   /* analysis cards, tabpanel, section bar wrapper, follow-up box, menu */
    --vl-radius-prompt:  12px;   /* legacy V1 prompt block (deprecated for new surfaces) */
}

/* ============================================================
   Dark theme overrides — vera-dark-mode-app-surface (V3.2.x)
   ============================================================
   Activated by `[data-theme="dark"]` on <html>, set by the
   early-paint script in base.html before stylesheet evaluation.
   Light mode is the default — these overrides only fire when
   the user (or their OS preference) has opted into dark mode.

   Initial values target a "warm dark" palette consistent with
   the V2 design's warm cream feel: deep warm-toned surfaces,
   warm off-white text, slightly lighter brand purple for
   dark-surface contrast. Values are PRELIMINARY — refined
   during Step 15 user iteration per P3 plan. The dark mode
   override scope is the app surface only; marketing pages,
   shared/export views, and code-block backgrounds are
   carved out elsewhere (base.html Jinja gate + body.shared-mode
   token reset in app.css).
   ============================================================ */
[data-theme="dark"] {
    /* Ink (text) — warm off-whites on deep warm-dark surfaces */
    --vl-ink:        #e8e2d5;  /* primary text */
    --vl-ink-soft:   #c4bdad;  /* secondary text, body copy */
    --vl-muted:      #8e8675;  /* meta text, placeholders */
    --vl-line:       #3a3530;  /* high-contrast borders */

    /* Surfaces — deep warm darks (warm-brown undertone, not neutral grey) */
    --vl-paper:      #22201c;  /* panel backgrounds */
    --vl-panel:      #2a2620;  /* past-analysis header bg */
    --vl-bg:         #1a1814;  /* page bg behind the snapshot */

    /* Accent (brand purple) — lifted slightly for legibility on dark surfaces */
    --vl-accent:      #8e83ff;  /* primary purple */
    --vl-accent-ink:  #b8b0ff;  /* purple text on dark — lifted ink */
    --vl-accent-soft: #2e2842;  /* tag pill bg, selected-row bg (deep purple) */
    --vl-accent-rgb:  142, 131, 255;  /* matches --vl-accent */
    /* Deep accent for header surfaces — medium-dark neutral grey
       (vera-dark-mode-app-surface Step 15 iteration). Clearly distinct
       from page bg #1a1814 without taking on a purple tint; ~3x bg
       luminance so header bands read as a recessed chrome layer
       under the title text. */
    --vl-accent-deep:     #454545;
    --vl-accent-deep-rgb: 69, 69, 69;
    /* Text/glyph on dark-grey header bars — warm off-white from the
       --vl-ink palette so it harmonizes with body text in dark mode. */
    --vl-accent-deep-ink: #e8e2d5;

    /* Status colors — lifted greens / oranges for legibility on dark */
    --vl-verified:    #6fb083;  /* DR "verified" label */
    --vl-verified-rgb: 111, 176, 131;
    --vl-unsupported: #e08266;  /* cancel button, "unsupported" label */
    --vl-unsupported-rgb: 224, 130, 102;
    --vl-unresolved:  #8e8675;  /* DR "unresolved" label */

    /* Gradient — medium-dark neutral grey (vera-dark-mode-app-surface
       Step 15 iteration). Degenerate gradient keeps the token type
       stable so downstream selectors don't need rewriting; visually
       solid #454545 across the full bar. */
    --vl-gradient-header: linear-gradient(90deg, #454545 0%, #454545 100%);
}