/* ─────────────────────────────────────────────────────────────────
   VolleyStats — Design Tokens
   Direzione "Daylight": tema chiaro ad alto contrasto, ottimizzato
   per uso a bordo campo (lettura sotto sole), tap target generosi,
   palette pink legata al brand Diavoli Rosa.
   ───────────────────────────────────────────────────────────────── */

:root {
  /* ── Palette neutra ── */
  --c-bg:           #f7f5ef;     /* off-white caldo, riduce glare */
  --c-surface:      #ffffff;
  --c-surface-alt:  #faf9f4;
  --c-surface-sunk: #f1efe8;
  --c-border:       #e6e3d8;
  --c-border-strong:#d3d1c7;
  --c-divider:      #ece9df;

  /* ── Testo ── */
  --c-text:         #1a1a22;     /* contrasto 14:1 su bg → AAA */
  --c-text-muted:   #5f5e5a;     /* AA su bg, AA su surface */
  --c-text-subtle:  #888780;     /* per hint, non per info essenziale */
  --c-text-on-brand:#ffffff;

  /* ── Brand (Diavoli Rosa pink) ── */
  --c-brand:        #D4537E;     /* primary action */
  --c-brand-hover:  #B33967;
  --c-brand-active: #8E2D52;
  --c-brand-soft:   #FBEAF0;     /* background "selezionato" */
  --c-brand-soft-2: #F4C0D1;
  --c-brand-text:   #722340;     /* testo su brand-soft */

  /* ── Semantici ── */
  --c-success:      #2A7F46;
  --c-success-soft: #E1F2E6;
  --c-warning:      #B97712;
  --c-warning-soft: #FBEEDA;
  --c-danger:       #C73E3E;
  --c-danger-soft:  #FBE7E7;
  --c-info:         #2563B0;
  --c-info-soft:    #E5EFFC;

  /* ── Spacing scale (base 4) ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;

  /* ── Typography ── */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-num:  ui-monospace, 'SF Mono', 'Menlo', monospace;

  --fs-display: 40px;
  --fs-h1: 22px;
  --fs-h2: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-label: 12px;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.5;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    600;

  /* ── Radius ── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 999px;

  /* ── Touch target minimi (outdoor / mobile) ── */
  --tap-min: 44px;
  --tap-rec: 48px;
  --tap-lg:  56px;

  /* ── Ombre minime ── */
  --sh-sm: 0 1px 2px rgba(20,20,40,0.04), 0 0 0 0.5px rgba(20,20,40,0.04);
  --sh-md: 0 2px 8px rgba(20,20,40,0.06), 0 0 0 0.5px rgba(20,20,40,0.04);
  --sh-lg: 0 8px 24px rgba(20,20,40,0.10), 0 0 0 0.5px rgba(20,20,40,0.04);
  --sh-focus: 0 0 0 3px rgba(212,83,126,0.35);

  /* ── Layout ── */
  --container-max: 720px;
  --topbar-h: 56px;
  --bottombar-h: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top:    env(safe-area-inset-top, 0px);

  /* ── Motion ── */
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 240ms;
  --easing: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ── Z-index scale ── */
  --z-topbar: 100;
  --z-overlay: 200;
  --z-sheet: 210;
  --z-toast: 300;

  /* ── Per-team (override runtime: app.js setProperty su :root) ── */
  --team: var(--c-brand);
  --team-soft: var(--c-brand-soft);
  --team-text: var(--c-brand-text);
}

/* Riduco motion se l'utente lo richiede */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; }
}