/* Refined Finished Detailing — design tokens (shared by site + style tile).
   Brand blue #1877ff is carried over from the existing logo/site. */
:root{
  /* Colour */
  --paper:#f3f5f8;          /* cool studio white — page background */
  --white:#ffffff;
  --ink:#0a0d12;            /* chrome-black from the logo lettering */
  --ink-2:#161c26;
  --ink-3:#252e3b;
  --steel:#5a6575;          /* body copy on light */
  --steel-2:#8a94a3;        /* captions, meta */
  --line:#dce1e8;
  --line-dark:#2a3342;
  --signal:#1877ff;         /* logo electric blue — primary action */
  --signal-deep:#0b5bd4;
  --signal-ice:#e7f0ff;
  --on-dark:#f5f8fc;
  --on-dark-muted:#b6c0ce;
  --success:#0f9d58;
  --danger:#d93025;

  /* Type */
  --font-display:"Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --step--1:clamp(.8rem,.77rem + .15vw,.9rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.125rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.5rem);
  --step-2:clamp(1.6rem,1.3rem + 1.4vw,2.4rem);
  --step-3:clamp(2.2rem,1.6rem + 3vw,4rem);
  --step-4:clamp(2.8rem,1.8rem + 5vw,6rem);

  /* Shape + motion */
  --radius-s:6px;
  --radius:10px;
  --radius-l:16px;
  --slant:-8deg;            /* motorsport speed-cut used on tags + stripes */
  --shadow:0 18px 50px rgba(10,13,18,.12);
  --shadow-strong:0 24px 70px rgba(10,13,18,.28);
  --ease:cubic-bezier(.2,.7,.2,1);
  --gutter:clamp(16px,4vw,40px);
  --maxw:1200px;
}