/* Paul Luskin Paving: design tokens. World: "Blacktop, done since 1982."
   Daylight inversion: cured-concrete ground, asphalt-dark bands as accent surfaces,
   hi-vis vest chartreuse accents, white road stripes for the drawn road devices. */
:root {
  /* surfaces */
  --concrete: #EAE8E4;       /* page ground, "cured concrete" */
  --concrete-2: #E2DFDA;     /* light panel step */
  --asphalt: #161616;        /* dark accent bands, "fresh mat" */
  --panel: #202022;          /* raised dark panel */
  --hairline: rgba(234, 232, 228, 0.12);       /* on dark */
  --hairline-ink: rgba(25, 25, 23, 0.16);      /* on light */

  /* ink */
  --ink: #191917;            /* body on light */
  --ink-dim: rgba(25, 25, 23, 0.64);
  --text: #E9E7E3;           /* body on dark bands */
  --text-dim: rgba(233, 231, 227, 0.66);

  /* paint */
  --vis: #C8D62B;            /* hi-vis vest chartreuse: fills and accent on dark (11.3:1 on asphalt) */
  --vis-hi: #D3DF3A;         /* hover step */
  --vis-deep: #4E5A00;       /* chartreuse deepened for text on light (6.2:1 on concrete) */
  --stripe-white: #F2F0EC;   /* drawn road devices: header dashes, edge lines */
  --sign-green: #14663B;     /* highway guide-sign panel only (white on it 7.0:1) */

  /* type */
  --display: "Rokkitt", "Rockwell", "Trebuchet MS", serif;
  --body: "Assistant", "Segoe UI", sans-serif;

  /* spacing scale, 8px base */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  /* misc */
  --radius: 2px;
  --header-h: 64px;
  --wrap: 1180px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.12);
  --focus: var(--vis-deep);

  /* asphalt grain: static SVG noise, dark bands only */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.95 0 0 0 0 0.93 0 0 0 0 0.9 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}