/**
 * Design tokens — Brazil volleyball palette
 */
:root {
	--color-primary: #1a5c2a;
	--color-accent: #f5c500;
	--color-secondary: #c25a1a;
	--color-bg: #f8f7f3;
	--color-surface: #ffffff;
	--color-surface-2: #eeede8;
	--color-text: #1a1c18;
	--color-text-muted: #4a4f45;
	--color-text-faint: #6b7366;

	--font-display: "Barlow Condensed", system-ui, sans-serif;
	--font-body: "Lato", system-ui, sans-serif;

	--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
	--text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
	--text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
	--text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
	--text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
	--text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);

	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;

	--radius-sm: 0.375rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.75rem;
	--radius-xl: 1rem;

	--shadow-sm: 0 1px 2px oklch(0.15 0.02 140 / 0.06);
	--shadow-md: 0 4px 12px oklch(0.15 0.02 140 / 0.09);
	--shadow-lg: 0 12px 32px oklch(0.15 0.02 140 / 0.13);

	/* Header: brand row + nav row (nav row 0 on narrow screens). See components.css .site-header */
	--header-row-brand: 3.5rem;
	--header-row-brand-scrolled: 3rem;
	--header-row-nav: 0px;
	--header-row-nav-scrolled: 0px;
	--header-h: calc(var(--header-row-brand) + var(--header-row-nav));
	--header-h-scrolled: calc(var(--header-row-brand-scrolled) + var(--header-row-nav-scrolled));
}

@media (min-width: 768px) {
	:root {
		--header-row-nav: 2.5rem;
		--header-row-nav-scrolled: 2.125rem;
	}
}

html[data-theme="dark"] {
	--color-primary: #4caf6a;
	--color-accent: #fdd835;
	--color-secondary: #e07a3a;
	--color-bg: #141510;
	--color-surface: #1c1e19;
	--color-surface-2: #252820;
	--color-text: #f0f2eb;
	--color-text-muted: #c4c9bc;
	--color-text-faint: #9aa090;

	--shadow-sm: 0 1px 2px oklch(0.05 0.02 140 / 0.4);
	--shadow-md: 0 4px 12px oklch(0.05 0.02 140 / 0.45);
	--shadow-lg: 0 12px 32px oklch(0.05 0.02 140 / 0.5);
}