/*
 * Design tokens — the only file that should ever contain raw colour
 * values. Every component references the semantic aliases below, so a
 * future palette tweak is a one-file change.
 */
:root {
	/* Raw palette */
	--raw-navy-900: #0f1b3d;
	--raw-navy-700: #1b2b5c;
	--raw-navy-500: #2c3f7c;
	--raw-sky-500: #4fa9e0;
	--raw-sky-300: #a9d8f5;
	--raw-teal-700: #166b65;
	--raw-teal-600: #1f8a83;
	--raw-teal-400: #4fb8ae;
	--raw-gold-600: #c8932a;
	--raw-gold-400: #e8b94b;
	--raw-gold-200: #f6dfa0;
	--raw-coral-500: #e8654f;
	--raw-coral-300: #f3a291;
	--raw-cream-100: #fdf8ec;
	--raw-cream-50: #fffdf7;
	--raw-white: #ffffff;
	--raw-ink-900: #1a1f2e;
	--raw-ink-600: #4a5170;
	--raw-ink-300: #9aa1bd;
	--raw-line-200: #e4e2d6;

	/* Semantic aliases — component CSS should only ever use these */
	--color-bg: var(--raw-cream-50);
	--color-surface: var(--raw-white);
	--color-surface-muted: var(--raw-cream-100);
	--color-anchor: var(--raw-navy-900);
	--color-anchor-soft: var(--raw-navy-700);
	--color-text: var(--raw-ink-900);
	--color-text-muted: var(--raw-ink-600);
	--color-border: var(--raw-line-200);

	--color-interface: var(--raw-sky-500);
	--color-interface-soft: var(--raw-sky-300);
	/* teal-700, not teal-600, so this passes 4.5:1 as small text on light backgrounds (eyebrows, links) */
	--color-interface-alt: var(--raw-teal-700);
	--color-interface-alt-soft: var(--raw-teal-400);

	--color-reward: var(--raw-gold-400);
	--color-reward-strong: var(--raw-gold-600);
	--color-reward-soft: var(--raw-gold-200);

	--color-accent: var(--raw-coral-500);
	--color-accent-soft: var(--raw-coral-300);
	/* darker than raw-coral-500 specifically so this passes 4.5:1 as text on light backgrounds */
	--color-accent-strong: #b8432f;

	--color-on-anchor: var(--raw-white);
	--color-on-reward: var(--raw-navy-900);
	--color-focus-ring: var(--raw-coral-500);
	--color-link: var(--color-interface-alt);
	--color-link-hover: var(--raw-navy-700);

	/* Spacing scale */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;

	/* Type scale */
	--font-body: 'Baloo 2', 'Atkinson Hyperlegible', system-ui, sans-serif;
	--font-display: 'Baloo 2', 'Fredoka', system-ui, sans-serif;
	--text-xs: 0.8rem;
	--text-sm: 0.9rem;
	--text-base: 1.05rem;
	--text-lg: 1.25rem;
	--text-xl: 1.6rem;
	--text-2xl: 2rem;
	--text-3xl: 2.6rem;
	--text-4xl: 3.4rem;
	--line-height-body: 1.65;
	--line-height-heading: 1.25;
	--measure: 65ch;

	/* Radii & shadows */
	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-pill: 999px;
	--shadow-card: 0 4px 0 rgba(15, 27, 61, 0.08), 0 8px 20px rgba(15, 27, 61, 0.08);
	--shadow-button-raised: 0 4px 0 var(--raw-gold-600);
	--shadow-button-raised-alt: 0 4px 0 var(--raw-navy-900);
	--shadow-button-pressed: 0 1px 0 var(--raw-gold-600);

	/* Motion (overridden centrally in components/motion.css for
	   reduced-motion) */
	--duration-fast: 120ms;
	--duration-base: 220ms;
	--duration-slow: 500ms;
	--ease-standard: cubic-bezier(0.2, 0.7, 0.3, 1);

	/* Shared breakpoint value, documented once and reused verbatim in
	   plain CSS (no build step, so no real custom-media support). */
	--bp-tablet: 768px;
}