/* ─────────────────────────────────────────────
   autopunk · design tokens (canonical)
   Sampled from the auto&punk logo — warm analogue palette,
   broadcast-era printed-matter feel. Mirrors .brand/tokens.css.
───────────────────────────────────────────── */

:root {
  /* ── Core (from the logo) ── */
  --black:          #0A0806;   /* warm near-black, logo background */
  --off-white:      #F4EED1;   /* warm cream, logo text + stars */
  --punk-red:       #D44A4A;   /* dusty coral, logo frame */
  --dark-grey:      #1C1814;   /* warm secondary dark — panels, cards */

  /* ── Off-white alpha variants (match --off-white rgb 244, 238, 209) ── */
  --off-white-70:   rgba(244, 238, 209, 0.70);
  --off-white-40:   rgba(244, 238, 209, 0.40);
  --off-white-10:   rgba(244, 238, 209, 0.10);
  --fg-muted:       rgba(244, 238, 209, 0.72);

  /* ── Expansion (use sparingly; all warm-family) ── */
  --punk-red-deep:  #8B2929;   /* darker red for hover, shadow, hero frame accent */
  --punk-red-hover: var(--punk-red-deep);
  --rust:           #C56B2A;   /* warm amber — special moments: pull-quotes, "founding", highlights */
  --bone:           #D9CEA7;   /* muted cream — secondary text on dark */

  /* ── Typography ──
     Display is single-weight (Caprasimo only ships 400). That is by design:
     the logo itself is single-weight. Use size and colour for hierarchy,
     never synthesized bold. Body is DM Sans (multi-weight). */
  --disp: 'Caprasimo', 'Boogaloo', 'Righteous', 'Titan One', serif;
  --body: 'DM Sans', 'Outfit', sans-serif;
  --mono: 'DM Mono', 'Fira Code', 'Courier New', monospace;

  /* ── Spacing scale (4-point, semantic) ──
     Use these instead of arbitrary rem values. Tight groupings live at
     sm/md; section separations at xl/2xl. */
  --space-2xs:  0.25rem;   /*  4px — hairline */
  --space-xs:   0.5rem;    /*  8px — tight sibling */
  --space-sm:   0.75rem;   /* 12px — label + value */
  --space-md:   1rem;      /* 16px — comfortable sibling */
  --space-lg:   1.5rem;    /* 24px — small section break */
  --space-xl:   2rem;      /* 32px — card interior */
  --space-2xl:  3rem;      /* 48px — section internal gap */
  --space-3xl:  4.5rem;    /* 72px — section padding (tight) */
  --space-4xl:  6rem;      /* 96px — section padding (generous) */

  /* ── Beta banner height reserve ── */
  --banner-h: 40px;
}
body.banner-dismissed { --banner-h: 0px; }
@media (max-width: 768px) {
  :root { --banner-h: 64px; }
}