/* ============================================================
   Intense Visions — REDESIGN CONCEPT design tokens
   Single source of truth. Archetype C — Editorial single-column.

   Direction rationale (each traces to dossier.md):
   - COOL PAPER + NEAR-BLACK INK, not the current dark dashboard.
     The current site leans on tech-dashboard theatrics (animated
     engine panel, live perf gauge). Twenty years and a deep bench
     of real work don't need theatrics — restraint reads as senior.
     An editorial, typographic direction is the sharpest contrast.
   - NEWSREADER editorial serif display (NOT Fraunces — differentiates
     from long-lane/huntington) paired with a SYSTEM MONO technical
     layer for kickers/figures/meta. Serif gravitas + mono engineering
     signal = "a studio journal, not a dashboard."
   - IV CYAN as the single accent, kept honest across themes: a deep
     teal-cyan for text/links on paper (passes AA), a bright cyan pinned
     for the fixed-dark engineering band and dark theme. This is IV's
     signature color — here it's a scalpel, not a floodlight.
   - No photography → no off-theme-stock risk. The page is carried on
     type + rule + one fixed-dark engineering band.
   ============================================================ */

/* Self-hosted display face — preloaded + subset → font-display: optional
   so a late swap never reflows headings (CLS trap). */
@font-face {
  font-family: "Newsreader";
  src: url("assets/newsreader-var.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: optional;
}
@font-face {
  font-family: "Newsreader";
  src: url("assets/newsreader-italic-var.woff2") format("woff2");
  font-weight: 200 800; font-style: italic; font-display: optional;
}

:root {
  /* — Type families — */
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;

  /* — Fluid type scale (editorial, generous, oversized display top end) — */
  --step--1: clamp(0.82rem, 0.78rem + 0.18vw, 0.92rem);
  --step-0:  clamp(1.06rem, 1.0rem + 0.3vw, 1.22rem);   /* body reading size */
  --step-1:  clamp(1.24rem, 1.14rem + 0.5vw, 1.55rem);
  --step-2:  clamp(1.55rem, 1.38rem + 0.9vw, 2.15rem);
  --step-3:  clamp(2.0rem, 1.65rem + 1.7vw, 3.1rem);
  --step-4:  clamp(2.5rem, 1.95rem + 2.8vw, 4.4rem);
  --step-5:  clamp(3.0rem, 2.1rem + 4.6vw, 6.6rem);     /* hero thesis */

  /* — Micro-label tier (small uppercase mono kickers) — */
  --label-sm: 0.68rem;

  /* — Weights — */
  --w-reg: 400;
  --w-med: 500;
  --w-semi: 600;

  /* — Spacing scale — */
  --space-1: 0.4rem;
  --space-2: 0.65rem;
  --space-3: 1rem;
  --space-4: 1.6rem;
  --space-5: 2.6rem;
  --space-6: 4rem;
  --space-7: clamp(3.4rem, 2.6rem + 2.6vw, 5.2rem);   /* major section beats */

  /* — Radii (editorial = minimal) — */
  --radius-sm: 3px;
  --radius: 6px;
  --radius-pill: 999px;

  /* — Measure / layout — */
  --gutter: clamp(1.35rem, 5vw, 2.6rem);
  --measure: 40rem;   /* body reading column */
  --plate: 58rem;     /* wider figures / work entries */
  --wide: 74rem;      /* masthead + full editorial width */

  /* — Motion — */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 220ms;

  /* — Theme-INDEPENDENT engineering-band tokens —
     the one fixed near-black band (a nod to IV's dark heritage) and
     any element on it MUST use these pinned values, never a theme var
     that would shift and fail contrast in the other theme. */
  --band:            #0c0e13;
  --band-2:          #14171f;
  --ink-on-band:     #eef1f5;   /* AA on --band */
  --ink-2-on-band:   #9aa4b0;   /* AA on --band for secondary */
  --accent-on-band:  #34d8ee;   /* bright IV cyan, high contrast on --band */
  --ink-on-accent:   #06222a;   /* dark ink for text ON the cyan accent (concept ribbon) — 9.6:1 */
  --line-on-band:    #2a2f39;
  --scrim:           rgba(10, 12, 16, 0.74); /* fixed — never theme-variable */
}

/* — Light theme (default): cool paper, near-black ink, deep-cyan accent — */
:root, :root[data-theme="light"] {
  --color-bg:         #f4f6f8;
  --color-surface:    #ffffff;
  --color-surface-2:  #eaedf1;
  --color-ink:        #12141a;   /* echoes the current site's #0a0a0a */
  --color-ink-2:      #474d58;   /* secondary text — AA on paper */
  --color-ink-3:      #667080;   /* muted meta / mono labels — AA on paper */
  --color-line:       #d9dde3;   /* hairlines */
  --color-line-2:     #c2c8d1;   /* stronger hairline */
  --accent:           #08707f;   /* deep teal-cyan — AA for text/links on paper */
  --accent-strong:    #044f5b;   /* hover / pressed */
  --accent-tint:      #e2f2f4;   /* faint cyan wash */
  --shadow-1: 0 1px 2px rgba(18, 20, 26, 0.04), 0 8px 24px rgba(18, 20, 26, 0.05);
}

/* — Dark theme — */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:         #0b0d11;
    --color-surface:    #12151c;
    --color-surface-2:  #1a1e26;
    --color-ink:        #eef1f5;
    --color-ink-2:      #aab2bd;
    --color-ink-3:      #7f8896;
    --color-line:       #242932;
    --color-line-2:     #343a45;
    --accent:           #34d8ee;   /* bright cyan reads as link on dark */
    --accent-strong:    #79e6f5;
    --accent-tint:      #0f2129;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 30px rgba(0, 0, 0, 0.45);
  }
}
:root[data-theme="dark"] {
  --color-bg:         #0b0d11;
  --color-surface:    #12151c;
  --color-surface-2:  #1a1e26;
  --color-ink:        #eef1f5;
  --color-ink-2:      #aab2bd;
  --color-ink-3:      #7f8896;
  --color-line:       #242932;
  --color-line-2:     #343a45;
  --accent:           #34d8ee;
  --accent-strong:    #79e6f5;
  --accent-tint:      #0f2129;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 30px rgba(0, 0, 0, 0.45);
}