/* ==========================================================================
   SNAP MOTORSPORTS — MOTIF TOKENS

   Direction reference: The Designers Republic (flat vector colour-blocking,
   hazard stripes, roundel stamps, obsessive part-coding and numbering,
   micro-caps legalese) crossed with The Attik (dark technical strata,
   blueprint overlays, one hot accent against an industrial field).

   Rules of the idiom:
   - Flat only. No soft gradients, no glows. Gradients here are STRIPES.
   - Every surface can be coded: part numbers, issue numbers, revision marks.
   - Micro-type is set in wide caps; display type is set tight and cropped.
   - One hot signal accent, used sparingly, against blue + ink.
   ========================================================================== */

:root {
  /* ---- Signal accent — hi-viz, derived (not in the original brand sheet).
     Used ONLY for marks, ticks, hazard stripes and single hot details. ----- */
  --snap-signal-500: oklch(86% 0.19 104);   /* acid hi-viz yellow-green */
  --snap-signal-600: oklch(78% 0.18 104);
  --snap-signal-100: oklch(96% 0.07 104);
  --color-signal:        var(--snap-signal-500);
  --color-signal-hover:  var(--snap-signal-600);

  /* ---- Hazard stripes — 45° flat bands, the core tDR device -------------- */
  --motif-hazard-size: 16px;
  --motif-hazard-signal: repeating-linear-gradient(45deg, var(--snap-signal-500) 0 var(--motif-hazard-size), var(--snap-ink-950) var(--motif-hazard-size) calc(var(--motif-hazard-size) * 2));
  --motif-hazard-blue: repeating-linear-gradient(45deg, var(--snap-blue-500) 0 var(--motif-hazard-size), var(--snap-ink-950) var(--motif-hazard-size) calc(var(--motif-hazard-size) * 2));
  --motif-hazard-ink: repeating-linear-gradient(45deg, var(--snap-ink-950) 0 var(--motif-hazard-size), var(--snap-ink-800) var(--motif-hazard-size) calc(var(--motif-hazard-size) * 2));
  --motif-hazard-light: repeating-linear-gradient(45deg, var(--snap-ink-200) 0 var(--motif-hazard-size), var(--snap-white) var(--motif-hazard-size) calc(var(--motif-hazard-size) * 2));

  /* ---- Blueprint / schematic overlays ------------------------------------ */
  --motif-grid-size: 32px;
  --motif-grid-line-dark: rgba(255, 255, 255, 0.06);
  --motif-grid-line-light: rgba(0, 0, 0, 0.06);
  --motif-grid-dark: linear-gradient(var(--motif-grid-line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--motif-grid-line-dark) 1px, transparent 1px);
  --motif-grid-light: linear-gradient(var(--motif-grid-line-light) 1px, transparent 1px), linear-gradient(90deg, var(--motif-grid-line-light) 1px, transparent 1px);
  --motif-dot-dark: radial-gradient(var(--motif-grid-line-dark) 1px, transparent 1px);
  --motif-dot-light: radial-gradient(var(--motif-grid-line-light) 1px, transparent 1px);

  /* ---- Hairlines & technical rules --------------------------------------- */
  --motif-hairline: 1px;
  --motif-rule-heavy: 3px;
  --motif-tick-length: 8px;

  /* ---- Micro-type — the "legalese" layer ---------------------------------- */
  --motif-microcaps-size: 10px;
  --motif-microcaps-tracking: 0.18em;
  --motif-microcaps-weight: 700;
  --motif-code-size: 11px;
  --motif-code-tracking: 0.06em;

  /* ---- Display crop — tight, oversized, cut to the edge ------------------- */
  --motif-display-tracking: -0.035em;
  --motif-display-leading: 0.88;

  /* ---- Roundel / stamp ---------------------------------------------------- */
  --motif-roundel-size: 72px;
  --motif-roundel-border: 2px;
}