/* =============================================================================
   Base Theme Variables (Modern Minimal - Default)
   Using HSL color format for compatibility with shadcn-svelte
   ============================================================================= */
:root {
	/* Font family (overridden per theme) */
	--font-sans:
		"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Base colors - Modern Minimal dark mode */
	--background: 0 0% 8%;
	--foreground: 0 0% 92%;

	--card: 0 0% 11%;
	--card-foreground: 0 0% 92%;

	--popover: 0 0% 11%;
	--popover-foreground: 0 0% 92%;

	--primary: 217 91% 60%;
	--primary-foreground: 0 0% 100%;

	--secondary: 0 0% 15%;
	--secondary-foreground: 0 0% 92%;

	--muted: 0 0% 15%;
	--muted-foreground: 0 0% 45%;

	--accent: 217 91% 60%;
	--accent-foreground: 0 0% 100%;

	--destructive: 0 84% 60%;
	--destructive-foreground: 0 0% 95%;

	--border: 0 0% 18%;
	--input: 0 0% 18%;
	--ring: 217 91% 60%;

	--radius: 0.375rem;

	/* Slide gradient colors - derived from primary hue */
	--primary-hue: 217;
	--slide-bg-start: hsl(var(--primary-hue) 30% 12%);
	--slide-bg-end: hsl(var(--primary-hue) 20% 8%);
	--slide-dark-start: hsl(var(--primary-hue) 5% 6%);
	--slide-dark-end: hsl(var(--primary-hue) 0% 4%);
	--slide-bar-end: hsl(var(--primary-hue) 40% 25%);
	--slide-peak-start: hsl(calc(var(--primary-hue) + 20) 60% 55%);
	--slide-peak-end: hsl(calc(var(--primary-hue) + 15) 50% 40%);

	/* Responsive content max-widths */
	--content-max-sm: 600px;
	--content-max-md: 800px;
	--content-max-lg: 900px;
	--content-max-xl: 1100px;

	/* Default shadow elevation system (overridden by premium themes) */
	--shadow-elevation-low: 0 1px 2px hsl(0 0% 0% / 0.3), 0 2px 4px hsl(0 0% 0% / 0.2);
	--shadow-elevation-medium: 0 4px 8px hsl(0 0% 0% / 0.4), 0 8px 16px hsl(0 0% 0% / 0.2);
	--shadow-elevation-high: 0 8px 16px hsl(0 0% 0% / 0.5), 0 16px 32px hsl(0 0% 0% / 0.3);

	/* Default slide-specific variables (overridden by premium themes) */
	--slide-glass-bg: hsl(var(--primary-hue) 20% 12% / 0.4);
	--slide-glass-border: hsl(var(--primary-hue) 30% 40% / 0.2);
	--slide-glass-blur: 20px;
	--slide-glow-color: hsl(var(--primary) / 0.4);
	--slide-accent-glow: hsl(var(--accent) / 0.3);

	/* WCAG 2.1 SC 2.5.5 minimum touch target. 2.75rem = 44px at the default
	   16px root font, the standard mobile-accessibility threshold. Apply via
	   the `.tap-target` utility below — any interactive element that should
	   pass touch-target audits gets `min-width`/`min-height` from this token. */
	--min-tap-size: 2.75rem;
}

.tap-target {
	min-width: var(--min-tap-size);
	min-height: var(--min-tap-size);
}

/* Dark mode class (same as :root since app is dark-only) */
.dark {
	--background: 0 0% 8%;
	--foreground: 0 0% 92%;
	--card: 0 0% 11%;
	--card-foreground: 0 0% 92%;
	--popover: 0 0% 11%;
	--popover-foreground: 0 0% 92%;
	--primary: 217 91% 60%;
	--primary-foreground: 0 0% 100%;
	--secondary: 0 0% 15%;
	--secondary-foreground: 0 0% 92%;
	--muted: 0 0% 15%;
	--muted-foreground: 0 0% 45%;
	--accent: 217 91% 60%;
	--accent-foreground: 0 0% 100%;
	--destructive: 0 84% 60%;
	--destructive-foreground: 0 0% 95%;
	--border: 0 0% 18%;
	--input: 0 0% 18%;
	--ring: 217 91% 60%;
}

/* =============================================================================
   Theme Presets
   Apply via class on body element: theme-modern-minimal, theme-supabase, etc.
   ============================================================================= */

/* Theme: Modern Minimal (Default) - Clean blue aesthetic */
html[data-theme="modern-minimal"],
.theme-modern-minimal {
	--font-sans: "Inter", system-ui, sans-serif;
	--background: 0 0% 8%;
	--foreground: 0 0% 92%;
	--card: 0 0% 11%;
	--card-foreground: 0 0% 92%;
	--popover: 0 0% 11%;
	--popover-foreground: 0 0% 92%;
	--primary: 217 91% 60%;
	--primary-foreground: 0 0% 100%;
	--secondary: 0 0% 15%;
	--secondary-foreground: 0 0% 92%;
	--muted: 0 0% 15%;
	--muted-foreground: 0 0% 45%;
	--accent: 217 91% 60%;
	--accent-foreground: 0 0% 100%;
	--destructive: 0 84% 60%;
	--destructive-foreground: 0 0% 95%;
	--border: 0 0% 18%;
	--input: 0 0% 18%;
	--ring: 217 91% 60%;
	--radius: 0.375rem;
	--primary-hue: 217;
}

/* Theme: Supabase - Teal/green brand colors */
html[data-theme="supabase"],
.theme-supabase {
	--font-sans: "Outfit", system-ui, sans-serif;
	--background: 0 0% 6%;
	--foreground: 0 0% 93%;
	--card: 160 10% 10%;
	--card-foreground: 0 0% 93%;
	--popover: 160 10% 10%;
	--popover-foreground: 0 0% 93%;
	--primary: 157 72% 50%;
	--primary-foreground: 160 20% 8%;
	--secondary: 160 15% 13%;
	--secondary-foreground: 0 0% 93%;
	--muted: 160 15% 13%;
	--muted-foreground: 0 0% 45%;
	--accent: 157 72% 50%;
	--accent-foreground: 160 20% 8%;
	--destructive: 4 84% 60%;
	--destructive-foreground: 0 0% 95%;
	--border: 160 15% 18%;
	--input: 160 15% 18%;
	--ring: 157 72% 50%;
	--radius: 0.5rem;
	--primary-hue: 157;
}

/* Theme: Doom 64 - Retro orange/brown gaming aesthetic */
html[data-theme="doom-64"],
.theme-doom-64 {
	--font-sans: "Oxanium", system-ui, sans-serif;
	--background: 0 0% 9%;
	--foreground: 0 0% 90%;
	--card: 27 15% 12%;
	--card-foreground: 0 0% 90%;
	--popover: 27 15% 12%;
	--popover-foreground: 0 0% 90%;
	--primary: 27 85% 50%;
	--primary-foreground: 27 20% 8%;
	--secondary: 133 50% 45%;
	--secondary-foreground: 133 20% 8%;
	--muted: 27 15% 16%;
	--muted-foreground: 0 0% 45%;
	--accent: 215 60% 55%;
	--accent-foreground: 0 0% 8%;
	--destructive: 45 80% 60%;
	--destructive-foreground: 0 0% 8%;
	--border: 27 20% 20%;
	--input: 27 20% 20%;
	--ring: 27 85% 50%;
	--radius: 0;
	--primary-hue: 27;
}

/* Theme: Amber Minimal - Warm amber/yellow tones */
html[data-theme="amber-minimal"],
.theme-amber-minimal {
	--font-sans: "Inter", system-ui, sans-serif;
	--background: 0 0% 8%;
	--foreground: 0 0% 92%;
	--card: 45 10% 11%;
	--card-foreground: 0 0% 92%;
	--popover: 45 10% 11%;
	--popover-foreground: 0 0% 92%;
	--primary: 45 90% 55%;
	--primary-foreground: 45 20% 8%;
	--secondary: 45 10% 15%;
	--secondary-foreground: 0 0% 92%;
	--muted: 45 10% 15%;
	--muted-foreground: 0 0% 45%;
	--accent: 35 80% 50%;
	--accent-foreground: 35 20% 8%;
	--destructive: 0 84% 60%;
	--destructive-foreground: 0 0% 95%;
	--border: 45 15% 20%;
	--input: 45 15% 20%;
	--ring: 45 90% 55%;
	--radius: 0.375rem;
	--primary-hue: 45;
}

/* Theme: Soviet Red - Classic red aesthetic */
html[data-theme="soviet-red"],
.theme-soviet-red {
	--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--background: 0 0% 6%;
	--foreground: 0 0% 92%;
	--card: 0 15% 10%;
	--card-foreground: 0 0% 92%;
	--popover: 0 15% 10%;
	--popover-foreground: 0 0% 92%;
	--primary: 0 75% 45%;
	--primary-foreground: 0 0% 100%;
	--secondary: 0 15% 13%;
	--secondary-foreground: 0 0% 92%;
	--muted: 0 15% 13%;
	--muted-foreground: 0 0% 45%;
	--accent: 45 80% 55%;
	--accent-foreground: 0 0% 8%;
	--destructive: 0 70% 40%;
	--destructive-foreground: 0 0% 95%;
	--border: 0 20% 18%;
	--input: 0 20% 18%;
	--ring: 0 75% 45%;
	--radius: 0.5rem;
	--primary-hue: 0;
}

/* =============================================================================
   Premium Wrapped Themes
   Dedicated themes for /wrapped/* slideshow pages with luxurious aesthetics
   ============================================================================= */

/* Theme: Obsidian Premium - Deep blacks with purple/platinum accents */
html[data-theme="obsidian-premium"],
.theme-obsidian-premium {
	--font-sans: "Inter", system-ui, sans-serif;
	--background: 260 15% 4%;
	--foreground: 0 0% 95%;
	--card: 260 20% 8%;
	--card-foreground: 0 0% 95%;
	--popover: 260 20% 8%;
	--popover-foreground: 0 0% 95%;
	--primary: 270 60% 65%;
	--primary-foreground: 0 0% 100%;
	--secondary: 260 15% 12%;
	--secondary-foreground: 0 0% 95%;
	--muted: 260 10% 15%;
	--muted-foreground: 0 0% 55%;
	--accent: 45 70% 70%;
	--accent-foreground: 0 0% 8%;
	--destructive: 0 84% 60%;
	--destructive-foreground: 0 0% 95%;
	--border: 260 15% 18%;
	--input: 260 15% 18%;
	--ring: 270 60% 65%;
	--radius: 0.75rem;
	--primary-hue: 270;

	/* Premium slide-specific variables */
	--slide-bg-gradient: linear-gradient(
		135deg,
		hsl(260 20% 6%) 0%,
		hsl(270 25% 4%) 50%,
		hsl(260 15% 3%) 100%
	);
	--slide-glass-bg: hsl(270 20% 12% / 0.4);
	--slide-glass-border: hsl(270 30% 40% / 0.3);
	--slide-glass-blur: 20px;
	--slide-glow-color: hsl(270 60% 50% / 0.4);
	--slide-accent-glow: hsl(45 70% 60% / 0.3);
	--slide-vignette-opacity: 0.5;
	--slide-noise-opacity: 0.03;

	/* Shadow depth system */
	--shadow-elevation-low: 0 1px 2px hsl(260 30% 0% / 0.3), 0 2px 4px hsl(260 30% 0% / 0.2);
	--shadow-elevation-medium:
		0 4px 8px hsl(260 30% 0% / 0.4), 0 8px 16px hsl(260 30% 0% / 0.2),
		0 0 40px hsl(270 50% 30% / 0.1);
	--shadow-elevation-high:
		0 8px 16px hsl(260 30% 0% / 0.5), 0 16px 32px hsl(260 30% 0% / 0.3),
		0 0 60px hsl(270 50% 40% / 0.15);

	/* Bar/chart gradients */
	--slide-bar-gradient: linear-gradient(180deg, hsl(270 50% 55%) 0%, hsl(280 40% 35%) 100%);
	--slide-peak-gradient: linear-gradient(180deg, hsl(45 80% 65%) 0%, hsl(35 70% 45%) 100%);
}

/* Theme: Aurora Premium - Teal to cyan/magenta iridescent */
html[data-theme="aurora-premium"],
.theme-aurora-premium {
	--font-sans: "Outfit", system-ui, sans-serif;
	--background: 200 30% 4%;
	--foreground: 0 0% 95%;
	--card: 195 25% 8%;
	--card-foreground: 0 0% 95%;
	--popover: 195 25% 8%;
	--popover-foreground: 0 0% 95%;
	--primary: 175 70% 50%;
	--primary-foreground: 195 30% 8%;
	--secondary: 200 20% 12%;
	--secondary-foreground: 0 0% 95%;
	--muted: 200 15% 15%;
	--muted-foreground: 0 0% 55%;
	--accent: 320 60% 60%;
	--accent-foreground: 0 0% 100%;
	--destructive: 0 84% 60%;
	--destructive-foreground: 0 0% 95%;
	--border: 195 20% 18%;
	--input: 195 20% 18%;
	--ring: 175 70% 50%;
	--radius: 1rem;
	--primary-hue: 175;

	/* Premium slide-specific variables */
	--slide-bg-gradient: linear-gradient(
		135deg,
		hsl(200 35% 5%) 0%,
		hsl(220 30% 6%) 40%,
		hsl(280 25% 5%) 100%
	);
	--slide-glass-bg: hsl(195 30% 15% / 0.35);
	--slide-glass-border: hsl(175 50% 50% / 0.25);
	--slide-glass-blur: 24px;
	--slide-glow-color: hsl(175 70% 45% / 0.35);
	--slide-accent-glow: hsl(320 60% 55% / 0.25);
	--slide-vignette-opacity: 0.45;
	--slide-noise-opacity: 0.025;

	/* Shadow depth system */
	--shadow-elevation-low: 0 1px 2px hsl(200 30% 0% / 0.3), 0 2px 4px hsl(200 30% 0% / 0.2);
	--shadow-elevation-medium:
		0 4px 8px hsl(200 30% 0% / 0.4), 0 8px 16px hsl(200 30% 0% / 0.2),
		0 0 40px hsl(175 60% 35% / 0.1);
	--shadow-elevation-high:
		0 8px 16px hsl(200 30% 0% / 0.5), 0 16px 32px hsl(200 30% 0% / 0.3),
		0 0 60px hsl(175 60% 45% / 0.15);

	/* Bar/chart gradients */
	--slide-bar-gradient: linear-gradient(180deg, hsl(175 65% 50%) 0%, hsl(195 50% 30%) 100%);
	--slide-peak-gradient: linear-gradient(180deg, hsl(320 60% 60%) 0%, hsl(340 50% 40%) 100%);
}

/* Theme: Champagne Premium - Warm golds with rose gold accents */
html[data-theme="champagne-premium"],
.theme-champagne-premium {
	--font-sans: "Inter", system-ui, sans-serif;
	--background: 35 15% 5%;
	--foreground: 40 10% 92%;
	--card: 35 20% 9%;
	--card-foreground: 40 10% 92%;
	--popover: 35 20% 9%;
	--popover-foreground: 40 10% 92%;
	--primary: 42 75% 55%;
	--primary-foreground: 35 25% 8%;
	--secondary: 35 15% 13%;
	--secondary-foreground: 40 10% 92%;
	--muted: 35 10% 15%;
	--muted-foreground: 35 5% 50%;
	--accent: 350 50% 65%;
	--accent-foreground: 0 0% 100%;
	--destructive: 0 70% 55%;
	--destructive-foreground: 0 0% 95%;
	--border: 35 15% 20%;
	--input: 35 15% 20%;
	--ring: 42 75% 55%;
	--radius: 0.625rem;
	--primary-hue: 42;

	/* Premium slide-specific variables */
	--slide-bg-gradient: linear-gradient(
		135deg,
		hsl(30 20% 5%) 0%,
		hsl(35 25% 4%) 50%,
		hsl(25 15% 3%) 100%
	);
	--slide-glass-bg: hsl(35 25% 15% / 0.35);
	--slide-glass-border: hsl(42 50% 50% / 0.25);
	--slide-glass-blur: 18px;
	--slide-glow-color: hsl(42 70% 50% / 0.3);
	--slide-accent-glow: hsl(350 50% 55% / 0.25);
	--slide-vignette-opacity: 0.4;
	--slide-noise-opacity: 0.02;

	/* Shadow depth system */
	--shadow-elevation-low: 0 1px 2px hsl(30 30% 0% / 0.35), 0 2px 4px hsl(30 30% 0% / 0.25);
	--shadow-elevation-medium:
		0 4px 8px hsl(30 30% 0% / 0.45), 0 8px 16px hsl(30 30% 0% / 0.25),
		0 0 40px hsl(42 60% 40% / 0.1);
	--shadow-elevation-high:
		0 8px 16px hsl(30 30% 0% / 0.5), 0 16px 32px hsl(30 30% 0% / 0.3),
		0 0 60px hsl(42 60% 50% / 0.15);

	/* Bar/chart gradients */
	--slide-bar-gradient: linear-gradient(180deg, hsl(42 65% 55%) 0%, hsl(35 50% 35%) 100%);
	--slide-peak-gradient: linear-gradient(180deg, hsl(350 55% 60%) 0%, hsl(340 45% 40%) 100%);
}

/* =============================================================================
   Slide Typography Utilities
   Reusable typography classes for wrapped slides
   ============================================================================= */

/* Title hierarchy */
.slide-title-xl {
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.slide-title-lg {
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.slide-title-md {
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
}

/* Label hierarchy */
.slide-label-lg {
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: hsl(var(--muted-foreground));
}

.slide-label-sm {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: hsl(var(--muted-foreground));
}

/* Stat numbers */
.slide-stat-hero {
	font-size: clamp(3rem, 12vw, 7rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

.slide-stat-lg {
	font-size: clamp(2rem, 8vw, 4rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

/* Text glow effects */
.text-glow-primary {
	text-shadow:
		0 0 20px hsl(var(--primary) / 0.5),
		0 0 40px hsl(var(--primary) / 0.3);
}

.text-glow-accent {
	text-shadow:
		0 0 20px hsl(var(--accent) / 0.5),
		0 0 40px hsl(var(--accent) / 0.3);
}

/* Gradient text utility */
.text-gradient-primary {
	background: linear-gradient(
		180deg,
		hsl(var(--primary)) 0%,
		hsl(calc(var(--primary-hue) + 15) 60% 55%) 100%
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* =============================================================================
   Slide Animation Utilities
   Hover transitions, shadow effects, and micro-animations
   ============================================================================= */

/* Standard hover transition timing */
:root {
	--transition-hover: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	--transition-fast: 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Shadow transition utility for interactive elements */
.shadow-transition {
	transition: box-shadow var(--transition-hover);
}

/* Combined hover transition utility */
.hover-transition {
	transition:
		transform var(--transition-hover),
		box-shadow var(--transition-hover),
		border-color var(--transition-hover);
}

/* Shimmer effect for hero text */
@keyframes shimmer {
	0% {
		background-position: -200% center;
	}
	100% {
		background-position: 200% center;
	}
}

.text-shimmer {
	background: linear-gradient(
		90deg,
		hsl(var(--primary)) 0%,
		hsl(calc(var(--primary-hue) + 30) 80% 75%) 50%,
		hsl(var(--primary)) 100%
	);
	background-size: 200% auto;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: shimmer 3s linear infinite;
}

/* Pulsing glow effect for emphasis */
@keyframes pulse-glow {
	0%,
	100% {
		box-shadow:
			var(--shadow-elevation-medium, 0 4px 12px hsl(0 0% 0% / 0.4)),
			0 0 20px var(--slide-glow-color, hsl(var(--primary) / 0.3));
	}
	50% {
		box-shadow:
			var(--shadow-elevation-medium, 0 4px 12px hsl(0 0% 0% / 0.4)),
			0 0 40px var(--slide-glow-color, hsl(var(--primary) / 0.5));
	}
}

.glow-pulse {
	animation: pulse-glow 2s ease-in-out infinite;
}

/* Breathing scale effect for settled elements */
@keyframes breathe {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.01);
	}
}

.breathe {
	animation: breathe 4s ease-in-out infinite;
}

/* Floating effect for icons */
@keyframes float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-8px);
	}
}

.float {
	animation: float 3s ease-in-out infinite;
}

/* Disable animations for reduced motion */
@media (prefers-reduced-motion: reduce) {
	.text-shimmer,
	.glow-pulse,
	.breathe,
	.float {
		animation: none;
	}
}

/* Base reset and styles */
* {
	border-color: hsl(var(--border));
}

body {
	background-color: hsl(var(--background));
	color: hsl(var(--foreground));
	font-family: var(--font-sans);
}

/* Wrapped routes: fill viewport with theme gradient */
body.wrapped-route {
	background: var(
		--slide-bg-gradient,
		linear-gradient(
			135deg,
			hsl(var(--primary-hue, 217) 30% 12%) 0%,
			hsl(var(--primary-hue, 217) 20% 8%) 100%
		)
	);
}

/* =============================================================================
   Toast Notifications (svelte-sonner)
   ============================================================================= */

[data-sonner-toaster] {
	--normal-bg: hsl(var(--card));
	--normal-text: hsl(var(--foreground));
	--normal-border: hsl(var(--border));

	--success-bg: hsl(140 40% 20%);
	--success-text: hsl(140 30% 90%);
	--success-border: hsl(140 45% 30%);

	--error-bg: hsl(var(--destructive));
	--error-text: hsl(var(--destructive-foreground));
	--error-border: hsl(0 60% 35%);

	--warning-bg: hsl(45 50% 25%);
	--warning-text: hsl(45 30% 90%);
	--warning-border: hsl(45 55% 40%);

	--info-bg: hsl(210 40% 25%);
	--info-text: hsl(210 20% 90%);
	--info-border: hsl(210 45% 40%);
}

[data-sonner-toast] {
	font-family: inherit;
	border-radius: var(--radius);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-sonner-toast][data-type="success"] {
	background: var(--success-bg);
	color: var(--success-text);
	border: 1px solid var(--success-border);
}

[data-sonner-toast][data-type="error"] {
	background: var(--error-bg);
	color: var(--error-text);
	border: 1px solid var(--error-border);
}

[data-sonner-toast][data-type="warning"] {
	background: var(--warning-bg);
	color: var(--warning-text);
	border: 1px solid var(--warning-border);
}

[data-sonner-toast][data-type="info"] {
	background: var(--info-bg);
	color: var(--info-text);
	border: 1px solid var(--info-border);
}

[data-sonner-toast] [data-close-button] {
	background: transparent;
	border: none;
	color: currentColor;
	opacity: 0.6;
	transition: opacity 0.15s ease;
}

[data-sonner-toast] [data-close-button]:hover {
	opacity: 1;
}

[data-sonner-toast] [data-title] {
	font-weight: 600;
	font-size: 0.875rem;
}

[data-sonner-toast] [data-description] {
	font-size: 0.8125rem;
	opacity: 0.9;
}