/* DHARNA 144 design tokens: "Delhi administrative brutalism". Shared by the game page (/tokens.css) and the landing page
   (inlined at build). Screen-printed posters on metro pillars, FIRs, dockets: newsprint, asphalt, hard edges.
   Every colour comes from the city's infrastructure, never the flag. See docs/plans/2026-10-18-dharna-144.md.
   Contrast is asserted by tests/brand.test.ts; change a hex here and that test tells you if it still passes. */
:root {
  --newsprint: #ECE0C8;   /* newsprint white: the universal background, and text on asphalt */
  --newsprint-2: #DDCFB3; /* the sheet under the sheet: ledger rows, bar tracks, pressed states */
  --asphalt: #0E0C09;     /* dry road tar: every border, primary text, every hard shadow */
  --ink-dim: #5A5246;     /* secondary text on newsprint */
  --newsprint-dim: #B5A890; /* secondary text on asphalt */
  --metro: #F8C40A;       /* Delhi Metro yellow: the primary action, the crowd */
  --barricade: #0A24B0;   /* Delhi Police barricade blue: police, the opposing side */
  --riso: #E3342F;        /* riso red: critical alerts, chapter ends, holding the square (large text and fills only) */
  --riso-ink: #B3261E;    /* riso red for small text on newsprint */

  --font-display: 'Bebas Neue', 'Khand', Impact, 'Arial Narrow', sans-serif;
  --font-hi: 'Khand', 'Bebas Neue', sans-serif;
  --font-hi-num: 'Mukta', 'Noto Sans Devanagari', sans-serif; /* Khand draws Devanagari digits as Latin figures */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Noto Sans Devanagari', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* the digital wheatpaste: no rounding anywhere, thick ink, shadows that are blocks, not blur */
  --radius: 0px;
  --bw: 3px;
  --border: var(--bw) solid var(--asphalt);
  --shadow: 6px 6px 0 var(--asphalt);
  --shadow-sm: 4px 4px 0 var(--asphalt);
  --gutter: 16px;
  --max: 1180px;

  /* textures: newsprint grain, the restricted-area hatch, a halftone screen */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .105 0 0 0 0 .1 .9 0 0 0 -.36'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --hatch: repeating-linear-gradient(-45deg, var(--asphalt) 0 2px, transparent 2px 7px);
  --halftone: radial-gradient(var(--asphalt) .9px, transparent 1.2px) 0 0 / 5px 5px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}