@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');

:root {
	color-scheme: light dark;

	/* Colors - Light mode (kids-ledger vibrant) */
	--color-primary: #0099ff;
	--color-primary-hover: #0088ee;
	--color-primary-active: #0077dd;
	--color-on-primary: #ffffff;
	--color-primary-text: #0066cc;
	--color-background: #e0f7fa;
	--color-surface: #ffffff;
	--color-text: #1a2a32;
	--color-text-muted: #52646d;
	--color-border: #b3e0ff;
	--color-secondary-pink: #ff6699;
	--color-secondary-gold: #ffcc00;

	/* Colors - Dark mode (kids-ledger vibrant) */
	--color-primary-dark: #33aaff;
	--color-primary-hover-dark: #66bbff;
	--color-primary-active-dark: #0088ee;
	--color-on-primary-dark: #ffffff;
	--color-primary-text-dark: #99ccff;
	--color-background-dark: #0f172a;
	--color-surface-dark: #1e293b;
	--color-text-dark: #f8fafc;
	--color-text-muted-dark: #94a3b8;
	--color-border-dark: #334155;
	--color-secondary-pink-dark: #ff8cb4;
	--color-secondary-gold-dark: #ffd166;

	/* Typography */
	--font-family: 'Fredoka', system-ui, sans-serif;
	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.25rem;
	--font-size-xl: 2rem;
	--font-size-2xl: 3rem;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* Spacing */
	--spacing-xs: 0.5rem;
	--spacing-sm: 0.75rem;
	--spacing-md: 1.25rem;
	--spacing-lg: 2rem;
	--spacing-xl: 3rem;
	--spacing-2xl: 4rem;

	/* Border radius */
	--radius-sm: 0.5rem;
	--radius-md: 1rem;
	--radius-lg: 1.5rem;
	--radius-xl: 2rem;
	--radius-full: 999px;

	/* Shadows */
	--shadow-sm: 0 2px 0 0 rgb(0 0 0 / 0.1);
	--shadow-md: 0 4px 0 0 rgb(0 0 0 / 0.1);
	--shadow-lg: 0 6px 0 0 rgb(0 0 0 / 0.1);
	--shadow-sm-dark: 0 2px 0 0 rgb(0 0 0 / 0.5);
	--shadow-md-dark: 0 4px 0 0 rgb(0 0 0 / 0.5);
	--shadow-lg-dark: 0 6px 0 0 rgb(0 0 0 / 0.5);

	/* Transitions */
	--transition-fast: 0.15s ease;
	--transition-normal: 0.2s ease;

	/* Responsive spacing - used for page-level padding */
	--spacing-page: var(--spacing-2xl);
	--spacing-section: var(--spacing-xl);
	--spacing-header: var(--spacing-xl);

	/* Background dot motion */
	--drift-x: 0px;
	--drift-y: 0px;
	--mouse-dir-x: 0;
	--mouse-dir-y: 0;
}

/* Tablet responsive overrides */
@media (max-width: 1024px) {
	:root {
		--spacing-page: var(--spacing-xl);
		--spacing-section: var(--spacing-lg);
		--spacing-header: var(--spacing-lg);
	}
}

/* Mobile responsive overrides */
@media (max-width: 640px) {
	:root {
		--spacing-page: var(--spacing-md);
		--spacing-section: var(--spacing-md);
		--spacing-header: var(--spacing-md);
	}

	input,
	select,
	textarea {
		font-size: max(16px, 1em);
	}
}

:root[data-theme='dark'] {
	/* Colors - Dark mode (smoldering ember) */
	--color-primary: var(--color-primary-dark);
	--color-primary-hover: var(--color-primary-hover-dark);
	--color-primary-active: var(--color-primary-active-dark);
	--color-on-primary: var(--color-on-primary-dark);
	--color-primary-text: var(--color-primary-text-dark);
	--color-background: var(--color-background-dark);
	--color-surface: var(--color-surface-dark);
	--color-text: var(--color-text-dark);
	--color-text-muted: var(--color-text-muted-dark);
	--color-border: var(--color-border-dark);

	/* Dark mode shadows - lighter for visibility */
	--shadow-sm: var(--shadow-sm-dark);
	--shadow-md: var(--shadow-md-dark);
	--shadow-lg: var(--shadow-lg-dark);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		/* Colors - Dark mode (smoldering ember) */
		--color-primary: var(--color-primary-dark);
		--color-primary-hover: var(--color-primary-hover-dark);
		--color-primary-active: var(--color-primary-active-dark);
		--color-on-primary: var(--color-on-primary-dark);
		--color-primary-text: var(--color-primary-text-dark);
		--color-background: var(--color-background-dark);
		--color-surface: var(--color-surface-dark);
		--color-text: var(--color-text-dark);
		--color-text-muted: var(--color-text-muted-dark);
		--color-border: var(--color-border-dark);

		/* Dark mode shadows - lighter for visibility */
		--shadow-sm: var(--shadow-sm-dark);
		--shadow-md: var(--shadow-md-dark);
		--shadow-lg: var(--shadow-lg-dark);
	}
}

/* Reset and base styles */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	line-height: 1.5;
	color: var(--color-text);
	background-color: var(--color-background);
	background-image: radial-gradient(var(--color-border) 2px, transparent 2px);
	background-size: 30px 30px;
	background-position: var(--drift-x) var(--drift-y);
	will-change: background-position;
}

body[data-kid-modal-open='true'] {
	background-image: var(--kid-modal-background-image);
	background-size: 36px 36px;
	background-position: var(--drift-x) var(--drift-y);
}

#root {
	min-height: 100vh;
}

.app-shell {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.loading-spinner {
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: 4px solid color-mix(in srgb, var(--color-border) 70%, transparent);
	border-top-color: var(--color-primary);
	opacity: 0;
	animation:
		spinner-fade-in 0.2s ease 120ms forwards,
		spinner-spin 0.9s linear 120ms infinite;
}

@keyframes spinner-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes spinner-fade-in {
	to {
		opacity: 1;
	}
}

@keyframes modal-pop {
	from {
		transform: scale(0.8);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes modal-close {
	from {
		transform: scale(1);
		opacity: 1;
	}
	to {
		transform: scale(0.94);
		opacity: 0;
	}
}

@keyframes modal-backdrop-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes modal-backdrop-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}