/* ============================================================
   DYUTAM INTEL — Design tokens
   Palette roles: ink = content · blue = interactive · green = live
   Type roles:    serif = editorial · sans = UI + labels · mono = numerals

   Accent, density and the headline face are overridable from the
   Customizer, which prints a small :root block after this file.
   ============================================================ */

:root{
  --font-serif:'Newsreader',Georgia,'Times New Roman',serif;
  --font-sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  --headline:var(--font-serif);
  --headline-weight:500;
  --type-label-floor:11px;
  --type-copy-small:13px;
  --section-title-size:clamp(28px,3.6vw,44px);
  --section-title-leading:1.12;
  --section-title-tracking:-.02em;
  --section-title-compact-leading:1.06;
  --section-title-compact-tracking:-.025em;
  /* Long-form article body reads in the editorial serif (Newsreader is drawn
     for continuous text) — Medium/NYT-style. UI + scan surfaces stay sans. */
  --reading:var(--font-serif);

  /* accent — Customizer overrides these seven. --accent is the fill that
     carries --accent-ink text (>=4.5:1 AA on every preset); --accent-bright
     is for glows, borders, focus rings and large display text on dark panels.
     Normal-sized accent text uses the contrast-safe roles below. Ink on bright
     measures ~3.7:1, so never pair those two on a text surface. */
  --accent:#2563eb;
  --accent-bright:#3b82f6;
  /* Normal-sized accent text has its own contrast-safe role. The Customizer
     replaces the light/dark source colours for every preset and custom hue. */
  --accent-text-light:#2562e8;
  --accent-text-dark:#3f85f6;
  --accent-text:var(--accent-text-light);
  --accent-soft:rgba(59,130,246,.12);
  --accent-line:rgba(59,130,246,.32);
  --accent-ink:#ffffff;
  --accent-em:var(--accent);

  --maxw:1280px;
  --gut:clamp(18px,4vw,40px);
  /* Halved 2026-08 from clamp(56px,8vw,112px): the old rhythm ran 159-235px
     of empty paper at most homepage seams (ink to ink, 1920w); this lands
     them at a uniform ~87-123px. The old value lives on as the comfy preset. */
  --pad-section:clamp(32px,4vw,56px);

  /* radii — three steps + pill */
  --r-sm:8px;
  --r:14px;
  --r-lg:20px;
  --r-pill:999px;
  --radius:var(--r);--radius-sm:var(--r-sm);--radius-lg:var(--r-lg);

  /* light theme — cool neutral paper to sit with the cool ink + accent */
  --bg:#f4f5f7;
  --bg-grid:rgba(14,17,22,.04);
  --surface:#ffffff;
  --surface-2:#fafbfc;
  --surface-3:#eef0f3;
  --border:#e4e7ec;
  --border-strong:#d3d8e0;
  --text:#0e1116;
  --text-muted:#535b67;
  /* --text-dim carries real content (dates, read-times, footer links, meta),
     not just decoration, so it must clear WCAG AA 4.5:1 for small text. The
     old #87909c was ~2.96:1 on the page bg. #666d79 is >=4.5:1 on every light
     surface — white 5.2, surface-2 5.0, --bg #f4f5f7 4.8 (the footer floor),
     surface-3 4.6 — and stays the lightest grey so dim<muted<label holds. */
  --text-dim:#666d79;
  --label:#3f4753;
  --shadow:0 1px 2px rgba(16,17,22,.04),0 10px 30px rgba(16,17,22,.06);
  --shadow-lg:0 2px 6px rgba(16,17,22,.05),0 22px 54px rgba(16,17,22,.10);
  --up:#15a06a;--down:#e0533d;
  /* Text-carrying live/delta colours. The base pair is tuned for dots, bars
     and fills and only reaches ~3.3:1 on light surfaces; these two clear
     4.5:1 on every light surface, for badges and ticker deltas. */
  --up-text:#0b7a4e;--down-text:#c23a24;
  --invert-bg:#070a0e;
  /* Homepage section-band fills. Aliases in light (the bands are just the
     surface ramp); overridden in dark, where the ramp sits too close to the
     page to read as bands. Kept separate from --surface-2/-3 so lifting a
     band never disturbs the ~70 card/chip/input uses of those tokens. */
  --band-alt:var(--surface-2);
  --band-alt-deep:var(--surface-3);
  color-scheme:light;
}

[data-theme="dark"]{
  --accent-text:var(--accent-text-dark);
  --bg:#070a0e;
  --bg-grid:rgba(255,255,255,.035);
  --surface:#0f141b;
  --surface-2:#10161e;
  --surface-3:#161d26;
  --border:#1c242e;
  --border-strong:#283340;
  --text:#eef2f6;
  --text-muted:#98a2ae;
  /* AA 4.5:1: old #5f6975 was ~3.3-3.6:1 on the dark ramp. #808a9a clears
     4.5:1 on every dark surface (bg..surface-3) and stays dimmer than muted.
     It is also what caps the band fills below: on --invert-bg, the lightest
     band, this lands at 4.54:1 — so lightening either this or a band token
     means re-checking the other. */
  --text-dim:#808a9a;
  --label:#9aa5b1;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 44px rgba(0,0,0,.55);
  --shadow-lg:0 2px 8px rgba(0,0,0,.55),0 30px 70px rgba(0,0,0,.6);
  --up:#27cf8c;--down:#ff6a52;
  --up-text:#27cf8c;--down-text:#ff6a52;
  /* Band fills, dark. Near black the contrast formula compresses hard: the
     old ramp left the weakest seam at 1.03:1, and the invert bands — the most
     dramatic in light — came out flattest of all, so the light-mode rhythm
     (slab / paper / slab) read as one undifferentiated dark field.

     The ceiling is --text-dim #808a9a, which carries real content and must
     hold AA 4.5:1 wherever it lands on a band: #1b232d leaves it 4.54:1 and
     anything lighter fails. That caps the whole usable range at 1.25:1, so
     the three fills are spaced to lift the *weakest* seam rather than to
     maximise any single one — the middles sit near the geometric mean of
     page and invert. Resulting seams, dark:

       page -> invert   1.25    invert -> alt        1.13
       alt  -> page     1.11    invert -> alt-deep   1.10
       alt-deep -> page 1.13

     Fill alone cannot carry this at these levels, so every boundary is also
     ruled: .section.invert gained a top hairline (home.css) and the alt bands
     keep border-block. Re-tune --text-dim before pushing these lighter. */
  --invert-bg:#1b232d;
  --band-alt:#111820;
  --band-alt-deep:#131a23;
  color-scheme:dark;
}

/* Dark "panel" context for sections that invert regardless of theme.
   Only the neutral ramp flips — the accent keeps whatever the
   Customizer set, so brand colour stays consistent across bands. */
.invert{
  --accent-text:var(--accent-text-dark);
  --bg:var(--invert-bg);
  --surface:#0e141b;
  --surface-2:#111922;
  --surface-3:#16202b;
  --border:#1e2935;
  --border-strong:#2a3845;
  --text:#f1f4f8;
  --text-muted:#9aa6b2;
  /* AA 4.5:1 (the inverted footer's small print lives here). Old #5d6873 was
     ~3.3-3.5:1; #808a9a clears 4.5:1 on every invert surface. */
  --text-dim:#808a9a;
  --label:#94a0ac;
  --up-text:#27cf8c;--down-text:#ff6a52;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 18px 50px rgba(0,0,0,.5);
  color-scheme:dark;
  color:var(--text);
}
.invert h1,.invert h2,.invert h3,.invert h4,.invert h5{color:var(--text)}

/* density */
[data-density="compact"]{--pad-section:clamp(24px,3vw,40px);}
[data-density="comfy"]{--pad-section:clamp(56px,8vw,112px);}

/* Large screens: widen the shell so content fills the viewport instead of
   sitting in a narrow centre column — no need to zoom in on big monitors.
   The reading measure on articles stays capped (prose max-width:74ch), so
   only the layout shell, grids and sidebars breathe wider. */
@media (min-width:1440px){ :root{ --maxw:1380px; } }
@media (min-width:1600px){ :root{ --maxw:1520px; } }
@media (min-width:1920px){ :root{ --maxw:1780px; } }
@media (min-width:2560px){ :root{ --maxw:2080px; } }