/* design-system.css — Voltage Tattoo. LOCKED tokens (the brief made concrete).
   Off-white gallery paper + near-black ink + ONE flat electric-cobalt accent.
   Neubrutalist / Swiss grid. Zero radius. Wide-grotesque display + mono utility.
   6 hex total, 1 accent, no glow, no pure #000/#fff. */

:root {
  /* ── colour (6 hex, locked across the whole page) ── */
  --bg:        #ECEBE7;   /* off-white gallery paper, warm-neutral, NOT pure white */
  --surface:   #E3E1DC;   /* deeper panel for grid blocks */
  --text:      #111110;   /* near-black ink, the dominant value, NOT pure black */
  --muted:     #6B6963;   /* warm grey, secondary copy + metadata */
  --line:      #C9C7C1;   /* the hard 1px rule colour — exposed grid */
  --accent:    #1F35FF;   /* electric cobalt, FLAT, < 8% of surface, never a glow */
  --on-accent: #ECEBE7;   /* text on the cobalt fill (off-white, not pure white) */

  /* convenience tints (derived, no new hue) */
  --ink-90: color-mix(in srgb, var(--text) 90%, transparent);
  --ink-70: color-mix(in srgb, var(--text) 70%, transparent);
  --ink-08: color-mix(in srgb, var(--text) 8%, transparent);

  /* ── type (wide grotesque display + grotesque body + mono utility) ── */
  --font-display: 'Archivo Expanded', 'Archivo', system-ui, sans-serif;
  --font-body:    'Archivo', system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* fluid type scale (major-third-ish, tight) */
  --step--2: clamp(0.69rem, 0.66rem + 0.15vw, 0.78rem);
  --step--1: clamp(0.83rem, 0.79rem + 0.20vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.50rem);
  --step-2:  clamp(1.44rem, 1.30rem + 0.70vw, 2.00rem);
  --step-3:  clamp(1.73rem, 1.50rem + 1.15vw, 2.66rem);
  --step-4:  clamp(2.07rem, 1.66rem + 2.05vw, 3.55rem);
  --step-5:  clamp(2.60rem, 1.80rem + 4.00vw, 5.50rem);
  --step-6:  clamp(3.20rem, 1.60rem + 8.00vw, 8.50rem);  /* hero display + oversized index numbers */

  /* ── geometry (ZERO radius — brutalist contract, locked) ── */
  --radius: 0px;
  --hair: 1px;          /* the exposed-grid rule weight */
  --rule: 2px;          /* heavier section divider */

  /* ── rhythm ── (tightened: was 4.5–9rem / 144px → dense brutalist composition) */
  --section-y: clamp(3.25rem, 2.4rem + 3.6vw, 6rem);
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* ── motion ── */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-mech: cubic-bezier(.65, 0, .35, 1);
}

/* base type rendering off the tokens (the scaffold engine reads these) */
body { font-family: var(--font-body); letter-spacing: -0.005em; }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; text-transform: uppercase; }

/* mono utility label — the cockpit-precise read used for index numbers, prices, metadata */
.mono { font-family: var(--font-mono); font-weight: 400; }
.label {
  font-family: var(--font-mono); font-size: var(--step--2);
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted);
}

::selection { background: var(--accent); color: var(--on-accent); }