/* ==========================================================================
   Dudes Baseball — Spacing, radius, shadow, motion tokens
   Magazine density. Mostly-square corners. Cinematic depth.
   ========================================================================== */

:root {
  /* ----- Spacing scale ----- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ----- Radii — Dudes runs SHARP (0–8px, never more) ----- */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --radius-sm: 2px;   /* legacy aliases */
  --radius-md: 2px;
  --radius-lg: 4px;
  --radius-pill: 999px;

  /* ----- Signature crimson bar thickness ----- */
  --crimson-bar: 3px;

  /* ----- Elevation — nearly flat; depth comes from edges, not blur ----- */
  --elev-1: 0 1px 0 rgba(255,255,255,.02), 0 0 0 1px var(--graphite-edge);
  --elev-2: 0 8px 24px rgba(0,0,0,.45), 0 0 0 1px var(--graphite-edge);
  --elev-3: 0 24px 48px rgba(0,0,0,.6),  0 0 0 1px var(--steel);
  --shadow-sm: var(--elev-1);
  --shadow-md: var(--elev-2);
  --shadow-lg: var(--elev-3);
  --shadow-glow: 0 0 0 1px var(--crimson), 0 0 24px rgba(200,35,42,0.35);
  --focus-ring: 0 0 0 2px var(--black), 0 0 0 4px var(--crimson);

  /* ----- Hairlines (composite) ----- */
  --hairline:        1px solid var(--hair);
  --hairline-strong: 1px solid var(--hair-strong);

  /* ----- Motion ----- */
  --motion-fast: 140ms; /* @kind other */
  --motion:      260ms; /* @kind other */
  --motion-slow: 480ms; /* @kind other */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */

  /* ----- Cinematic backdrop helpers ----- */
  --carbon-pattern:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.012) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.35)       0 1px, transparent 1px 4px); /* @kind other */
  --grain:
    radial-gradient(rgba(255,255,255,.02) 1px, transparent 1px) 0 0/3px 3px; /* @kind other */
  --photo-tint:
    radial-gradient(120% 80% at 50% 0%, rgba(200,35,42,0.20), transparent 60%),
    linear-gradient(180deg, rgba(10,10,10,0.45) 0%, rgba(10,10,10,0.82) 70%, var(--black) 100%);

  /* ----- Signature diagonal crimson banner (the defining Dudes move) ----- */
  --banner-angle: -12deg; /* @kind other */ /* crimson section banners cut across at 12–20° */
}