/* ==========================================================================
   Palette chiara: bianco e grigi freddi con lo stesso sistema di rosa.
   È anche il fallback se data-theme manca.
   ========================================================================== */

:root,
:root[data-theme="light"] {
	color-scheme: light;

	/* Porcellana: bianco, grigi freddi e morbidi; il rosa solo dove serve. */
	--bg: #FFFFFF;
	--bg-deep: #F6F6F9;
	--surface-1: #F7F7FA;
	--surface-2: #F0F0F5;
	--surface-3: #E6E6EE;
	--border: #E3E3EB;

	--text: #15151C;
	--text-muted: #5F5F6B;

	/* Il rosa del marchio per linee e dettagli; lampone per testo e pulsanti. */
	--accent: #FF0A7A;
	/* Lo stesso accento in canali RGB, per le trasparenze (rgba(var(--accent-rgb), .1)). */
	--accent-rgb: 255, 10, 122;
	--accent-hover: #B8005B;
	--accent-deep: #B8005B;
	/* Testo lampone su bianco: 5,6:1 (AA). */
	--accent-text: #C2005B;
	--on-accent: #FFFFFF;
	--pink: #FF3B93;
	--pink-light: #FF66B3;
	--pink-pale: #FAD3E4;
	--pink-tint: #FDF1F6;

	/* Pulsanti e fondi pieni con testo bianco: 5:1 (AA). */
	--accent-fill: #D6006B;
	--accent-fill-hover: #B8005B;
	/* Etichette sulle card: rosa tenue, testo lampone scuro (7:1), non un blocco pieno. */
	--pill-bg: #FCE8F1;
	--pill-text: #A3004D;
	--chip-bg: var(--surface-1);
	--chip-text: var(--text);
	--focus: #C2005B;

	--card-bg: #FFFFFF;
	--card-border: #E6E6EE;
	--shadow-sm: 0 1px 2px rgba(20, 20, 35, 0.05), 0 1px 1px rgba(20, 20, 35, 0.03);
	--shadow-md: 0 14px 34px -14px rgba(20, 20, 35, 0.16), 0 2px 6px rgba(20, 20, 35, 0.04);
	--glow: none;

	--header-bg: rgba(255, 255, 255, 0.9);
	--overlay: rgba(18, 19, 25, 0.45);
	--media-scrim: linear-gradient(180deg, rgba(8, 10, 17, 0) 30%, rgba(8, 10, 17, 0.82) 100%);
	/* Schede in evidenza (risposta rapida, gioco, "Continua con"): bianche e sollevate. */
	--quick-bg: #FFFFFF;
	--quick-border: #E6E6EE;
	/* Fasce di voto: tonalità scure, leggibili come testo su fondo chiaro (AA). */
	--score-top: var(--accent-text);
	--score-high: #137A4B;
	--score-good: #4B7300;
	--score-mid: #8F5B00;
	--score-low: #C1272D;

	--skeleton: #ECECF2;
	--skeleton-shine: #F6F6F9;
}

/* --------------------------------------------------------------------------
   Rifiniture del tema chiaro: le schede in evidenza sono bianche e
   sollevate (ombra morbida), con il rosa solo come filo o nel titoletto.
   -------------------------------------------------------------------------- */

:root:not([data-theme="dark"]) :is(.game-box, .hub-link) {
	box-shadow: var(--shadow-md);
}

:root:not([data-theme="dark"]) .hub-link:hover {
	border-color: var(--pink-pale);
}

:root:not([data-theme="dark"]) .update-box.has-note {
	border-color: var(--card-border);
	border-left: 4px solid var(--accent);
	background: var(--card-bg);
	box-shadow: var(--shadow-sm);
}

/* Sulle immagini (hero) l'etichetta resta piena: deve leggersi sopra la foto. */
:root:not([data-theme="dark"]) :is(.hero-card, .card__media, .game-card__media) .pill {
	--pill-bg: var(--accent-fill);
	--pill-text: var(--on-accent, #FFFFFF);
}