/**
 * GamesVTV Design Tokens
 * @package GamesVTV
 */

:root {
	/* Color */
	--gv-bg: #F5F7FA;
	--gv-bg-secondary: #EEF2F7;
	--gv-card-bg: #FFFFFF;
	--gv-text-primary: #111827;
	--gv-text-secondary: #4B5563;
	--gv-text-muted: #6B7280;
	--gv-accent: #F4C542;
	--gv-accent-hover: #FFD96A;
	--gv-border: #E5E7EB;
	--gv-footer-bg: #0F1117;
	--gv-footer-text: #D1D5DB;
	--gv-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.72) 100%);
	--gv-header-bg: rgba(255, 255, 255, 0.9);
	--gv-input-bg: #F8FAFC;
	--gv-accent-subtle: rgba(244, 197, 66, 0.12);
	--gv-accent-muted: rgba(244, 197, 66, 0.35);
	--gv-accent-ring: rgba(244, 197, 66, 0.45);
	--gv-accent-glow: rgba(244, 197, 66, 0.25);
	--gv-rating-color: #b45309;
	--gv-table-header-bg: linear-gradient(180deg, #fff9e6 0%, rgba(255, 212, 71, 0.18) 100%);
	--gv-table-row-hover: rgba(255, 212, 71, 0.08);
	--gv-table-zebra: var(--gv-bg-secondary);
	--gv-overlay-backdrop: rgba(15, 17, 23, 0.45);
	--gv-placeholder-bg: linear-gradient(135deg, var(--gv-bg-secondary), #d1d5db);
	--gv-code-bg: #F3F4F6;
	--gv-selection-bg: rgba(255, 212, 71, 0.35);
	--gv-selection-color: var(--gv-text-primary);
	--gv-scrollbar-track: var(--gv-bg-secondary);
	--gv-scrollbar-thumb: #CBD5E1;
	--gv-theme-color: #F5F7FA;

	/* Shadow */
	--gv-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
	--gv-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
	--gv-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1);
	--gv-shadow-header: 0 4px 20px rgba(0, 0, 0, 0.06);

	/* Radius */
	--gv-radius-sm: 8px;
	--gv-radius: 16px;
	--gv-radius-lg: 24px;
	--gv-radius-full: 9999px;

	/* Typography */
	--gv-font-sans: Inter, system-ui, -apple-system, sans-serif;
	--gv-font-display: 'Space Grotesk', Inter, system-ui, sans-serif;
	--gv-font-hero: 'Bebas Neue', 'Space Grotesk', Inter, system-ui, sans-serif;
	--gv-text-h1: 48px;
	--gv-text-h2: 34px;
	--gv-text-h3: 28px;
	--gv-text-card-title: 22px;
	--gv-text-body: 18px;
	--gv-text-small: 14px;
	--gv-leading-body: 1.75;
	--gv-leading-tight: 1.25;

	/* Layout */
	--gv-container: 1400px;
	--gv-article: 860px;
	--gv-toc-width: 300px;
	--gv-sidebar-latest-visible: 24rem;
	--gv-header-height: 80px;
	--gv-header-compact: 64px;
	--gv-space-sm: 32px;
	--gv-space-md: 48px;
	--gv-space-lg: 64px;
	--gv-gutter: 24px;

	/* Motion */
	--gv-duration-fast: 200ms;
	--gv-duration: 250ms;
	--gv-duration-slow: 300ms;
	--gv-duration-header: 400ms;
	--gv-ease: cubic-bezier(0, 0, 0.2, 1);

	/* Z-index */
	--gv-z-header: 100;
	--gv-z-toc: 50;
	--gv-z-progress: 200;
	--gv-z-back-top: 90;
	--gv-z-overlay: 150;
}

[data-theme="dark"] {
	--gv-bg: #0D1220;
	--gv-bg-secondary: #131A2B;
	--gv-card-bg: #131A2B;
	--gv-text-primary: #FFFFFF;
	--gv-text-secondary: rgba(255, 255, 255, 0.78);
	--gv-text-muted: rgba(255, 255, 255, 0.62);
	--gv-border: rgba(255, 255, 255, 0.08);
	--gv-header-bg: rgba(8, 12, 22, 0.75);
	--gv-input-bg: #1A1D26;
	--gv-accent-subtle: rgba(244, 197, 66, 0.1);
	--gv-accent-muted: rgba(244, 197, 66, 0.28);
	--gv-accent-ring: rgba(244, 197, 66, 0.38);
	--gv-accent-glow: rgba(244, 197, 66, 0.25);
	--gv-rating-color: #F4C542;
	--gv-table-header-bg: linear-gradient(180deg, rgba(244, 197, 66, 0.14) 0%, rgba(244, 197, 66, 0.06) 100%);
	--gv-table-row-hover: rgba(244, 197, 66, 0.05);
	--gv-table-zebra: rgba(255, 255, 255, 0.03);
	--gv-overlay-backdrop: rgba(0, 0, 0, 0.62);
	--gv-placeholder-bg: linear-gradient(135deg, #1A1D26, #2D3340);
	--gv-code-bg: #151922;
	--gv-selection-bg: rgba(255, 212, 71, 0.22);
	--gv-selection-color: #F9FAFB;
	--gv-scrollbar-track: #151922;
	--gv-scrollbar-thumb: #3D4658;
	--gv-theme-color: #0D1220;
	--gv-noise-opacity: 0.02;
	--gv-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.28);
	--gv-shadow: 0 4px 24px rgba(0, 0, 0, 0.32);
	--gv-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.4);
	--gv-shadow-header: 0 4px 20px rgba(0, 0, 0, 0.35);
	color-scheme: dark;
}

html {
	color-scheme: light;
}

@media (max-width: 767px) {
	:root {
		--gv-text-h1: 32px;
		--gv-text-h2: 26px;
		--gv-text-h3: 22px;
		--gv-text-card-title: 19px;
		--gv-text-body: 17px;
		--gv-text-small: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--gv-duration-fast: 0ms;
		--gv-duration: 0ms;
		--gv-duration-slow: 0ms;
		--gv-duration-header: 0ms;
	}
}