/* ============================================================
   Intense Visions — REDESIGN CONCEPT v2 · design tokens
   Single source of truth. Archetype D — Data / big-numeral forward.

   The A/B counter-thesis to v1 (C editorial, light, restrained):
   v1 argued "restraint reads as senior." v2 argues the opposite —
   LEAN INTO IV's real identity (cyan-on-near-black, the perf gauge)
   and make the interface itself perform. An engineering *console*.

   Direction rationale (each traces to dossier.md):
   - DARK BY DEFAULT — IV's true signature is cyan-on-black. This is
     the current site's DNA, elevated: precise, instrument-like, dark.
   - NUMBERS AS HERO + RHYTHM — 20+ yrs, 5,200+ sales, 0.8s LCP, 100.
     Strong quantifiable proof earns the big-numeral archetype.
   - SPACE GROTESK display + SPACE MONO technical layer (NOT a serif —
     that was v1). A geometric grotesk with superb tabular figures for
     the numerals; mono for labels/console chrome/the gauge readout.
   - The 0→100 performance gauge (a nod to the live site's dashboard)
     returns as ONE signature moment, not page-wide theater.
   ============================================================ */

@font-face {
  font-family: "Space Grotesk";
  src: url("assets/space-grotesk-var.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: optional;
}
@font-face {
  font-family: "Space Mono";
  src: url("assets/space-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: optional;
}

:root {
  /* — Type families — */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* — Fluid type scale — */
  --step--1: clamp(0.8rem, 0.76rem + 0.18vw, 0.9rem);
  --step-0:  clamp(1.0rem, 0.96rem + 0.28vw, 1.15rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.3rem + 0.95vw, 2.1rem);
  --step-3:  clamp(1.95rem, 1.6rem + 1.7vw, 3.0rem);
  --step-4:  clamp(2.4rem, 1.85rem + 2.7vw, 4.1rem);
  /* — Oversized numeral tier (the big-numeral hero + ledger) — */
  --step-num-lg: clamp(6rem, 3rem + 17vw, 17rem);   /* the giant hero numeral */
  --step-num:    clamp(2.6rem, 1.9rem + 3.4vw, 4.8rem); /* ledger numerals */

  --label-sm: 0.68rem;

  --w-light: 300; --w-reg: 400; --w-med: 500; --w-semi: 600; --w-bold: 700;

  /* — Spacing — */
  --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.4rem);

  /* — Radii (console = crisp, small) — */
  --radius-sm: 3px; --radius: 8px; --radius-pill: 999px;

  /* — Layout — */
  --gutter: clamp(1.25rem, 5vw, 2.6rem);
  --measure: 42rem; --plate: 60rem; --wide: 76rem;

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

  /* ===== DARK = DEFAULT IDENTITY ===== */
  --color-bg:        #08090c;
  --color-surface:   #0e1016;
  --color-surface-2: #14171f;
  --color-ink:       #eef2f6;
  --color-ink-2:     #9aa6b4;   /* AA on bg */
  --color-ink-3:     #737e8c;   /* AA on bg for meta */
  --color-line:      #1c212b;
  --color-line-2:    #2b333f;
  --accent:          #38d7ec;   /* IV cyan — 12:1 on bg */
  --accent-strong:   #7fe8f6;
  --accent-dim:      #2a7f8d;
  --accent-tint:     #0f2630;   /* cyan-black wash for cards */
  --accent-ink:      #05222a;   /* dark ink for text ON solid cyan */
  --glow:            rgba(56, 215, 236, 0.28);  /* numeral / gauge glow */
  --grid-line:       rgba(120, 160, 175, 0.06); /* blueprint grid */
  --scrim:           rgba(6, 8, 12, 0.78);
  --shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 18px 40px rgba(0,0,0,.5);
}

/* ===== LIGHT = OPT-IN (toggle only; console stays dark by default) ===== */
:root[data-theme="light"] {
  --color-bg:        #f5f7f9;
  --color-surface:   #ffffff;
  --color-surface-2: #ecf0f3;
  --color-ink:       #0b0d12;
  --color-ink-2:     #454e5d;   /* AA on paper */
  --color-ink-3:     #616b79;   /* AA on paper */
  --color-line:      #dde1e8;
  --color-line-2:    #c4cad3;
  --accent:          #07727f;   /* deep cyan — AA text on paper */
  --accent-strong:   #045863;
  --accent-dim:      #6aa3ab;
  --accent-tint:     #e2f2f4;
  --accent-ink:      #ffffff;   /* light theme: white text on deep-teal accent (dark theme keeps #05222a on bright cyan) */
  --glow:            rgba(7, 114, 127, 0.16);
  --grid-line:       rgba(20, 40, 55, 0.05);
  --scrim:           rgba(10, 12, 16, 0.7);
  --shadow-1: 0 1px 2px rgba(18,20,26,.05), 0 14px 34px rgba(18,20,26,.07);
}