/* Fives — Design System tokens · LOCKED 2026-05-20
   Palette: C · Chalk & Court
   Type:    Schibsted Grotesk (display) + Inter (body)
   Logo:    A · Geometric wordmark (see logos.jsx → LogoA)

   Every page in this project imports this file. Edit here to propagate. */

:root {
  /* ── Colour · Palette C (Chalk & Court) ─────────────────────── */
  --fives-primary:      #234C36;   /* Court green */
  --fives-primary-700:  #173728;   /* Hover / pressed */
  --fives-primary-100:  #DCE5DD;   /* Tint / surface */
  --fives-accent:       #9B6B3F;   /* Saddle brown — the old-leather ball */
  --fives-accent-700:   #7A5230;
  --fives-text:         #2A2418;   /* Warm near-black */
  --fives-muted:        #857A66;   /* Warm grey */
  --fives-bg:           #F5EFE1;   /* Warm cream — the distinctive note */
  --fives-bg-2:         #ECE4D2;   /* Slightly deeper cream */
  --fives-line:         #DDD3BC;   /* Hairline rules */
  --fives-alert:        #D14B2D;   /* Terracotta, used sparingly */

  /* ── Type ───────────────────────────────────────────────────── */
  --fives-display: "Schibsted Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fives-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fives-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Spacing scale ──────────────────────────────────────────── */
  --fives-s-1:  4px;
  --fives-s-2:  8px;
  --fives-s-3:  12px;
  --fives-s-4:  16px;
  --fives-s-6:  24px;
  --fives-s-8:  32px;
  --fives-s-12: 48px;
  --fives-s-16: 64px;
  --fives-s-24: 96px;

  /* ── Radii ──────────────────────────────────────────────────── */
  --fives-r-sm: 3px;
  --fives-r-md: 6px;
  --fives-r-lg: 10px;
}