/* QuizTime 2.0 design tokens. Custom properties only: no element selectors, so any page may link this.
   Source: expo/src/theme/tokens.js (palettes, gameAccents, radius, shadows, fonts). */

:root {
	color-scheme: light;

	--qt-canvas: #F6F3FC;
	--qt-surface: #FFFFFF;
	--qt-surface2: #F1ECFA;
	--qt-surface3: #E7E0F5;
	--qt-ink: #1A1033;
	--qt-ink2: #6E6688;
	--qt-ink3: #9A93B5;
	--qt-hairline: rgba(26, 16, 51, 0.08);
	--qt-brand: #5B21B6;
	--qt-brand-soft: #EEE8FB;
	--qt-brand-text: #5B21B6;
	--qt-on-brand: #FFFFFF;
	--qt-gold: #FFD60A;
	--qt-on-gold: #1A1033;
	--qt-live: #FF3B30;
	--qt-on-live: #FFFFFF;
	--qt-success: #15A75A;
	--qt-success-soft: #DCF5E6;
	--qt-success-text: #15733E;
	--qt-danger: #E5393F;
	--qt-danger-soft: #FDE8E8;
	--qt-danger-text: #C42A30;
	--qt-streak: #C2410C;
	--qt-tab-bar: rgba(255, 255, 255, 0.94);

	--qt-ghigliottina: #7C3AED;
	--qt-ruota: #F97316;
	--qt-catena: #0EA5E9;
	--qt-stage-ghigliottina-a: #2A0A5E;
	--qt-stage-ghigliottina-b: #5B21B6;
	--qt-stage-ruota-a: #5A1D06;
	--qt-stage-ruota-b: #C2410C;
	--qt-stage-catena-a: #082F49;
	--qt-stage-catena-b: #0369A1;

	--qt-radius-sm: 10px;
	--qt-radius-md: 16px;
	--qt-radius-lg: 20px;
	--qt-radius-xl: 26px;
	--qt-radius-pill: 999px;

	--qt-shadow-card: 0 8px 18px rgba(59, 15, 122, 0.10);
	--qt-shadow-raised: 0 12px 24px rgba(59, 15, 122, 0.16);
	--qt-shadow-tile: 0 6px 12px rgba(0, 0, 0, 0.18);

	--qt-font-display: 'Fredoka', sans-serif;
	--qt-font-body: 'Nunito', sans-serif;
	--qt-font-mono: 'Space Mono', monospace;
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;

		--qt-canvas: #120B22;
		--qt-surface: #1D1535;
		--qt-surface2: #271D45;
		--qt-surface3: #332757;
		--qt-ink: #F4F0FF;
		--qt-ink2: #A99FC4;
		--qt-ink3: #7C7399;
		--qt-hairline: rgba(255, 255, 255, 0.08);
		--qt-brand: #8B5CF6;
		--qt-brand-soft: #2A1D4D;
		--qt-brand-text: #C4B5FD;
		--qt-on-brand: #FFFFFF;
		--qt-gold: #FFD60A;
		--qt-on-gold: #1A1033;
		--qt-live: #FF453A;
		--qt-on-live: #FFFFFF;
		--qt-success: #3DDC84;
		--qt-success-soft: #163A2A;
		--qt-success-text: #7EE2A8;
		--qt-danger: #FF6B6B;
		--qt-danger-soft: #3D1C22;
		--qt-danger-text: #FF9B9B;
		--qt-streak: #FFB86B;
		--qt-tab-bar: rgba(18, 11, 34, 0.94);

		--qt-ghigliottina: #A78BFA;
		--qt-ruota: #FB923C;
		--qt-catena: #38BDF8;

		--qt-shadow-card: 0 8px 18px rgba(0, 0, 0, 0.35);
		--qt-shadow-raised: 0 12px 24px rgba(0, 0, 0, 0.45);
		--qt-shadow-tile: 0 6px 12px rgba(0, 0, 0, 0.30);
	}
}

:root.qt-dark {
	color-scheme: dark;

	--qt-canvas: #120B22;
	--qt-surface: #1D1535;
	--qt-surface2: #271D45;
	--qt-surface3: #332757;
	--qt-ink: #F4F0FF;
	--qt-ink2: #A99FC4;
	--qt-ink3: #7C7399;
	--qt-hairline: rgba(255, 255, 255, 0.08);
	--qt-brand: #8B5CF6;
	--qt-brand-soft: #2A1D4D;
	--qt-brand-text: #C4B5FD;
	--qt-on-brand: #FFFFFF;
	--qt-gold: #FFD60A;
	--qt-on-gold: #1A1033;
	--qt-live: #FF453A;
	--qt-on-live: #FFFFFF;
	--qt-success: #3DDC84;
	--qt-success-soft: #163A2A;
	--qt-success-text: #7EE2A8;
	--qt-danger: #FF6B6B;
	--qt-danger-soft: #3D1C22;
	--qt-danger-text: #FF9B9B;
	--qt-streak: #FFB86B;
	--qt-tab-bar: rgba(18, 11, 34, 0.94);

	--qt-ghigliottina: #A78BFA;
	--qt-ruota: #FB923C;
	--qt-catena: #38BDF8;

	--qt-shadow-card: 0 8px 18px rgba(0, 0, 0, 0.35);
	--qt-shadow-raised: 0 12px 24px rgba(0, 0, 0, 0.45);
	--qt-shadow-tile: 0 6px 12px rgba(0, 0, 0, 0.30);
}