/* Hard Hat Sports — Shape, border & elevation tokens
   Flat, square, engineered. Corners stay at 0–4px. Depth comes from
   hairlines, surface change, and a single restrained shadow — never soft glow. */
:root {
  /* Radius — commit to square */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-pill: 9999px;   /* status dots / avatars only */

  /* Border widths */
  --border-hair: 1px;
  --border-strong: 2px;

  /* Elevation — restrained. Used mostly on the dark surface. */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 12px 40px rgba(0, 0, 0, 0.55);

  /* Inset top-highlight that reads as brushed metal on dark tiles */
  --inset-metal: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* Focus ring — gold, square */
  --ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--focus-ring);

  /* Accent rule — the gold keyline used under eyebrows & on active tabs */
  --rule-accent: 2px solid var(--accent);

  /* Motion — mechanical, no bounce */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;
}