/* ==========================================================================
   Lovers — Design tokens (fonte di verità del design system)
   I componenti usano SOLO gli alias semantici, mai i valori raw.
   ========================================================================== */

:root {
	/* --- Scala oro (brand) ------------------------------------------------ */
	--gold-50:  #fdf8d9;
	--gold-100: #faf0ae;
	--gold-200: #f7e678;
	--gold-300: #f4da3c;
	--gold-400: #f1d722;
	--gold-500: #dabd14;
	--gold-600: #c2a40b;
	--gold-700: #967f08;
	--gold-800: #6b5a06;
	--gold-900: #423905;

	/* --- Scala neutra (ink) ----------------------------------------------- */
	--ink-0:   #ffffff;
	--ink-50:  #f5f5f2;
	--ink-100: #e8e8e3;
	--ink-200: #d4d4cd;
	--ink-300: #b9b9b0;
	--ink-400: #94948b;
	--ink-500: #74746c;
	--ink-600: #57574f;
	--ink-700: #3d3d37;
	--ink-800: #262622;
	--ink-900: #151512;
	--ink-950: #060605;

	/* --- Semantici feedback ------------------------------------------------ */
	--win:  #3fa34d;
	--draw: #b8b8a8;
	--loss: #d24b3e;
	--info: #3a7bd5;

	/* --- Alias brand -------------------------------------------------------- */
	--brand:        var(--gold-400);
	--brand-strong: var(--gold-500);
	--brand-deep:   var(--gold-600);
	--on-brand:     var(--ink-950);

	/* --- Superfici ---------------------------------------------------------- */
	--bg:             var(--ink-950);
	--surface:        var(--ink-900);
	--surface-raised: var(--ink-800);
	--surface-card:   var(--ink-900);

	/* --- Testo ---------------------------------------------------------------- */
	--text:        var(--ink-50);
	--text-muted:  var(--ink-300);
	--text-subtle: var(--ink-400);

	/* --- Bordi ------------------------------------------------------------------ */
	--border:        rgba(255, 255, 255, 0.10);
	--border-strong: rgba(255, 255, 255, 0.20);
	--border-gold:   var(--gold-400);

	/* --- Chip risultato ----------------------------------------------------- */
	--result-win:  var(--win);
	--result-draw: var(--draw);
	--result-loss: var(--loss);

	/* --- Spaziatura (griglia 8px) ------------------------------------------- */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;

	/* --- Raggi (stretti, architettonici) -------------------------------------- */
	--radius-sm:   3px;
	--radius-card: 6px;
	--radius-lg:   12px;
	--radius-pill: 999px;

	/* --- Bordi spessore ------------------------------------------------------- */
	--border-hairline: 1px;
	--border-base:     2px;
	--border-bold:     3px;

	/* --- Ombre (basse e dure) --------------------------------------------------- */
	--shadow-sm:   0 2px 0 rgba(0, 0, 0, 0.35);
	--shadow-md:   0 4px 0 rgba(0, 0, 0, 0.35);
	--shadow-lg:   0 8px 0 rgba(0, 0, 0, 0.45);
	--shadow-gold: 0 0 28px rgba(241, 215, 34, 0.22);

	/* --- Effetti signature ------------------------------------------------------ */
	--grad-matchday: linear-gradient(180deg, var(--gold-400) 0%, var(--gold-600) 26%, var(--ink-900) 64%, var(--ink-950) 100%);
	--spotlight: radial-gradient(120% 80% at 50% -10%, rgba(241, 215, 34, 0.18) 0%, transparent 55%);
	--grain-url: url(../img/grain.svg);

	/* --- Motion -------------------------------------------------------------------- */
	--ease-out:    cubic-bezier(0, 0, 0.2, 1);
	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-snap:   cubic-bezier(0.2, 0, 0, 1);
	--dur-fast:  120ms;
	--dur-base:  200ms;
	--dur-slow:  360ms;

	/* --- Tipografia -------------------------------------------------------------- */
	--font-display: 'Anton', 'Arial Black', sans-serif;
	--font-ui: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

	--text-display-2xl: clamp(3.5rem, 9vw, 8rem);
	--text-display-xl:  clamp(2.75rem, 6vw, 5rem);
	--text-display-lg:  clamp(2rem, 4vw, 3.25rem);
	--text-display-md:  1.75rem;
	--text-h1: 2rem;
	--text-h2: 1.5rem;
	--text-h3: 1.25rem;
	--text-body: 1rem;
	--text-sm: 0.875rem;
	--text-xs: 0.75rem;
	--text-2xs: 0.6875rem;

	/* --- Layout ---------------------------------------------------------------------- */
	--container-narrow: 720px;
	--container: 1080px;
	--container-wide: 1320px;

	/* --- Focus ------------------------------------------------------------------------ */
	--focus-ring: 0 0 0 2px var(--ink-950), 0 0 0 4px var(--brand);
}

/* --------------------------------------------------------------------------
   Scope chiaro per pagine stampabili (moduli, documenti): ridefinisce solo
   gli alias semantici, i componenti restano identici.
   -------------------------------------------------------------------------- */
.theme-light {
	--bg:             var(--ink-0);
	--surface:        var(--ink-50);
	--surface-raised: var(--ink-100);
	--surface-card:   var(--ink-0);

	--text:        var(--ink-950);
	--text-muted:  var(--ink-600);
	--text-subtle: var(--ink-500);

	--border:        rgba(6, 6, 5, 0.12);
	--border-strong: rgba(6, 6, 5, 0.25);

	--shadow-sm: 0 2px 0 rgba(6, 6, 5, 0.08);
	--shadow-md: 0 4px 0 rgba(6, 6, 5, 0.08);
	--shadow-lg: 0 8px 0 rgba(6, 6, 5, 0.10);

	--focus-ring: 0 0 0 2px var(--ink-0), 0 0 0 4px var(--brand-deep);
}