/* ============================================================================
   VALERON DESIGN TOKENS v3.0
   The only file in the repository allowed to contain a literal color value.
   Themes: [data-v-theme="dark"] (default) and [data-v-theme="light"].
   Contrast ledger: GENERATED, from this file, by the valeron-research
   theme's tests/contrast-ledger.php into its docs/contrast-ledger.md.
   Every text/surface pair in both themes, with its computed ratio, its
   floor, and the stated reason for each exemption. That check runs in
   the theme's pre-push hook, so the ledger cannot drift from the values
   below: change a token here, re-copy, regenerate, or the push fails.

   (This header previously pointed at references/design-tokens.md
   section 6. No such file has ever existed in this repo, checked
   2026-09-14 -- the design system cited a source of truth that was
   never written. The two tokens with the least headroom over the 4.5:1
   text floor also carry their measured ratio inline below, where
   someone about to change one will actually be looking.)
   ============================================================================ */

/* ---------------------------------------------------------------- FONTS ---- */
/* <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600
   &family=Inter+Tight:wght@400;500;600&family=Geist+Mono:wght@400;500
   &display=swap" rel="stylesheet"> */

:root{
  /* ---- families ---- */
  --v-font-mark:'Cinzel', Georgia, serif;                 /* wordmark ONLY */
  --v-font-ui:'Inter Tight','Helvetica Neue',Helvetica,Arial,sans-serif;
  --v-font-mono:'Geist Mono','IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ---- type scale ---- */
  --v-text-verdict-size:clamp(40px,5.4vw,62px);
  --v-text-verdict-lh:.94;
  --v-text-verdict-ls:-.035em;
  --v-text-hero-num:34px;
  --v-text-stat:20px;
  --v-text-h2:17px;
  --v-text-value:15px;
  --v-text-h3:14px;
  --v-text-body:14px;
  --v-text-prose:12.5px;
  --v-text-data:12px;
  --v-text-label:10px;
  --v-text-chip:9.5px;
  --v-track-label:.15em;
  --v-track-chip:.12em;
  --v-track-th:.14em;
  --v-track-mark:.14em;

  /* ---- space scale ---- */
  --v-space-1:4px;
  --v-space-2:8px;
  --v-space-3:12px;
  --v-space-4:16px;
  --v-space-5:24px;
  --v-space-6:32px;
  --v-space-7:48px;
  --v-space-8:64px;

  /* ---- fixed component padding ---- */
  --v-pad-mod-head:13px 18px;
  --v-pad-mod-body:18px;
  --v-pad-mod-foot:12px 18px;
  --v-pad-cell:10px 14px;
  --v-pad-th:11px 14px;
  --v-pad-chip:5px 8px;
  --v-pad-tab:13px 16px;

  /* ---- radius and border ---- */
  --v-radius-1:2px;
  --v-radius-2:4px;
  --v-border:1px;

  /* ---- layout ---- */
  --v-maxw:1560px;
  --v-topbar-h:60px;
  --v-tape-h:36px;
  --v-rail-top:84px;
  --v-prose-measure:62ch;

  /* ---- motion ---- */
  --v-motion-fast:120ms;
  --v-motion-base:180ms;
  --v-motion-ease:cubic-bezier(.2,.6,.2,1);
  --v-motion-pulse:2.6s;

  /* ---- charts ---- */
  --v-chart-w:760;
  --v-chart-h-sm:180;
  --v-chart-h-md:200;
  --v-chart-h-lg:222;
  --v-chart-stroke:1.6px;
  --v-chart-stroke-2:1.3px;
  --v-chart-dash:3 3;
  --v-chart-axis-size:9.5px;
}

/* =============================================================== DARK ==== */
:root,
[data-v-theme="dark"]{
  color-scheme:dark;

  /* surfaces */
  --v-bg:#0A0B0D;
  --v-bg-2:#0E1013;
  --v-panel:#111317;
  --v-panel-2:#15181D;

  /* rules */
  --v-rule:#23272E;
  --v-rule-soft:#1A1E23;
  --v-grid:#1D2127;

  /* ink */
  --v-ink:#EAE8E3;
  --v-ink-2:#9DA1A9;
  --v-ink-3:#82878F;

  /* brand and semantic */
  --v-accent:#A9302E;        /* FILL ONLY: 2.79:1 on panel */
  --v-accent-text:#CE6459;   /* text-safe oxblood */
  /* Deliberately NOT #990000 here: that is 2.21:1 on the dark ground.
     Anything that hovers to --v-accent-hot on a dark surface gets the
     text-safe oxblood instead of an unreadable one. */
  --v-accent-hot:#CE6459;
  --v-brass:#C39A4E;
  --v-pos:#549C7B;
  --v-neg:#CE6459;
  --v-slate:#7391B4;

  /* soft fills */
  --v-accent-soft:rgba(169,48,46,.14);
  --v-brass-soft:rgba(195,154,78,.13);
  --v-pos-soft:rgba(84,156,123,.13);
  --v-neg-soft:rgba(206,100,89,.13);
  --v-slate-soft:rgba(115,145,180,.13);

  /* overlays only */
  --v-shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -20px rgba(0,0,0,.9);
}

/* ============================================================== LIGHT ==== */
[data-v-theme="light"]{
  color-scheme:light;

  --v-bg:#F5F4F1;            /* cool ivory, never pure white */
  --v-bg-2:#EFEEEA;
  --v-panel:#FFFFFF;
  --v-panel-2:#FAF9F7;

  --v-rule:#E0DED8;
  --v-rule-soft:#EAE8E3;
  --v-grid:#ECEAE5;

  --v-ink:#14161A;
  --v-ink-2:#5B6067;
  /* 4.60:1 on --v-bg. Passes the 4.5 text floor with 0.10 of headroom
     and nothing more. Safe for timestamps, method notes and captions;
     NOT for body-length text, and not a value to darken the background
     under without recomputing. Measured 2026-09-14. */
  --v-ink-3:#6A6F77;

  --v-accent:#8C1C22;
  --v-accent-text:#8C1C22;   /* 9.11:1 on panel, safe as text */
  /* Hover and the logotype letter. 8.11:1 on --v-bg, 8.92:1 on --v-panel,
     so it is safe as text on any light surface. It is NOT safe on the dark
     topbar (2.21:1) -- the one place it is used there is the single letter
     of the wordmark, which is a logotype and exempt from the text floor
     the same way .v-mark__name span already is. Do not use it for hover
     on a dark surface; those hover to --v-ink instead. */
  --v-accent-hot:#990000;
  /* 4.56:1 on --v-bg. Same story as --v-ink-3: 0.06 of headroom over
     the text floor. Eyebrow labels and single values only, never a
     paragraph. Measured 2026-09-14. */
  --v-brass:#8A6A2F;
  --v-pos:#2E6A4F;
  --v-neg:#9B2C24;
  --v-slate:#3E5C7E;

  --v-accent-soft:rgba(140,28,34,.08);
  --v-brass-soft:rgba(138,106,47,.10);
  --v-pos-soft:rgba(46,106,79,.10);
  --v-neg-soft:rgba(155,44,36,.09);
  --v-slate-soft:rgba(62,92,126,.10);

  --v-shadow:0 1px 1px rgba(20,22,26,.04), 0 14px 30px -22px rgba(20,22,26,.35);
}

/* ================================================== PRINT ADAPTATION ==== */
@media print{
  :root{
    --v-bg:#FFFFFF;
    --v-panel:#FFFFFF;
    --v-panel-2:#FAF9F7;
    --v-border:.5pt;
    --v-text-prose:11pt;
    --v-text-label:8pt;
  }
  [data-v-theme]{color-scheme:light}
}

/* ==================================================== MOTION OPT-OUT ==== */
@media (prefers-reduced-motion:reduce){
  :root{
    --v-motion-fast:0ms;
    --v-motion-base:0ms;
  }
}

/* ========================================================= ARTICLE ====
   APPROVED 2026-09-14 -- CC_BRIEF_article_page.md section 4.
   Additive layer for the WordPress article page (valeron-research theme).
   Not used anywhere else in the app; the existing scale above (--v-text-body
   at 14px, --v-text-prose at 12.5px) is correct for a dense dashboard module
   and deliberately wrong for long-form reading, so this does not replace it.
   Light theme only -- the article surface never runs dark.

   Rationale: 17.5px at 1.62 line-height across a 66ch measure is a reading
   surface. 12.5px at 1.6 across 62ch (the existing --v-text-prose /
   --v-prose-measure pair) is a data caption. They are different jobs, so
   this is a new scale, not a reuse of the module one at the wrong size. ==== */
:root{
  /* The wordmark is the logo, not the statement. It sits at 21px in a
     compact 64px bar; the scale goes to the READING instead, which is
     what an evergreen research article is actually evidencing. */
  --v-art-logo:21px;
  --v-art-logo-track:.26em;
  --v-art-topbar-h:64px;

  /* The verdict: the largest element on the page.
     Sized against measured glyph widths, not guessed. "STRESSED" is
     4.50em in Inter Tight SemiBold at -.05em tracking, so 214px puts it
     at 962px and it clears a 1440px viewport (1313px inside the pad)
     with room for the score column. The whole V-01 enum fits except
     UNAVAILABLE (6.08em, 1301px), which is a no-data state that should
     never headline an article and is allowed to wrap if it ever does.
     The suggested size ("/ AVOID") must NOT be set at this size inline:
     "STRESSED / AVOID" as one string is 7.89em and overflows every
     viewport under 1920px. Hence --v-art-verdict-size at 0.28em of it. */
  --v-art-verdict:clamp(58px,14.4vw,214px);
  --v-art-verdict-lh:.8;
  --v-art-verdict-ls:-.05em;
  --v-art-verdict-size:.28em;               /* the "/ AVOID" half, relative */
  --v-art-score:clamp(46px,9vw,132px);
  --v-art-score-ls:-.055em;

  --v-art-h1:clamp(38px,6.6vw,100px);
  --v-art-h1-lh:.94;
  --v-art-h1-ls:-.042em;
  --v-art-lede:clamp(20px,2.4vw,32px);      /* the answer block */
  --v-art-lede-lh:1.32;
  --v-art-h2:clamp(24px,2.6vw,38px);
  --v-art-h2-lh:1.08;
  --v-art-h3:18px;
  --v-art-body:18.5px;
  --v-art-body-lh:1.66;
  --v-art-caption:13px;
  /* 760px, not a ch value. The study's 60ch lands around 510px at 17.5px,
     which reads as a ribbon on a 1920px screen next to full-bleed bands.
     760px is the middle of the 720-800px Pedro asked for. It is a wide
     measure (roughly 88 characters, above the 66-75 usually called
     comfortable), so the body size goes up with it: bigger type across a
     wider column keeps the line-length-in-characters closer to sane than
     widening the column alone would. */
  --v-art-measure:760px;
  --v-art-pad:clamp(24px,4.4vw,72px);       /* full-bleed side gutter */
  --v-art-rail:6ch;                         /* the 01/02 section number column */
  --v-art-rhythm:clamp(48px,6vw,88px);      /* vertical gap between sections */

  /* Cluster archive (valeron-archive-layout-study.html). The study set the
     H1 at 10.4vw; measured against the real cluster names that overflows
     its half-width column by ~5% for "Framework" (4.67em, the longest
     single word, which cannot wrap) at every viewport from 761px to
     1440px. 9.8vw fits all eight names at every width. */
  --v-art-archive-h1:clamp(52px,9.8vw,164px);
  --v-art-archive-h1-lh:.84;

  /* Front page (valeron-frontpage-study.html). 7.4vw verified against the
     longest words a headline realistically carries ("backwardation" 6.14em,
     "UNAVAILABLE" 6.12em): fits the lead's text column at every width. */
  --v-home-h1:clamp(40px,7.4vw,112px);
  --v-home-h1-lh:.9;
  --v-home-h1-ls:-.046em;
  --v-home-lede:clamp(17px,1.6vw,22px);
}