/* Design tokens — see design.md §2, §3.2, §4.1, §4.2, §9.3 */

:root {
	/* Primary surfaces */
	--color-cream:        #F2E4D3;
	--color-cream-soft:   #F7ECDC;
	--color-ink:          #14213D;
	--color-ink-soft:     #2A3858;
	--color-white:        #FFFFFF;

	/* Accent */
	--color-mustard:      #E8C766;
	--color-mustard-soft: #F4DDA1;

	/* Functional */
	--color-success: #5D8F6C;
	--color-warning: #D4925B;
	--color-error:   #B85450;
	--color-border:  #D9C7AE;
	--color-divider: #E5D4BC;

	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(20, 33, 61, 0.06);
	--shadow-md: 0 4px 12px rgba(20, 33, 61, 0.08);
	--shadow-lg: 0 12px 32px rgba(20, 33, 61, 0.10);

	/* Type scale */
	--font-size-xs:   0.75rem;
	--font-size-sm:   0.875rem;
	--font-size-base: 1rem;
	--font-size-lg:   1.125rem;
	--font-size-xl:   1.5rem;
	--font-size-2xl:  2rem;
	--font-size-3xl:  2.75rem;
	--font-size-4xl:  3.5rem;

	/* Hero display sizes — fluid clamp() so titles auto-fit between 360px and 1440px+ viewports
	   without 3-step breakpoint cascades. See Pick3-Lessons §1c. */
	--hero-display-size: clamp(2.5rem, 6.5vw + 0.5rem, 6rem);       /* 40px → 96px */
	--hero-sub-size:     clamp(1.25rem, 1.4vw + 0.75rem, 1.625rem); /* 20px → 26px */

	--line-height-tight:  1.15;
	--line-height-normal: 1.5;
	--line-height-loose:  1.7;

	--font-display: "Fraunces", Georgia, serif;
	--font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-mono:    "JetBrains Mono", "SF Mono", Consolas, monospace;

	/* Layout */
	--max-width-content: 68ch;
	--max-width-wide:    1040px;
	--max-width-full:    1280px;

	/* Spacing scale */
	--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-24: 6rem;

	/* Motion */
	--motion-duration-instant: 80ms;
	--motion-duration-fast:    160ms;
	--motion-duration-base:    260ms;
	--motion-duration-slow:    400ms;
	--motion-duration-reveal:  700ms;
	--motion-duration-hero:    1000ms;

	--motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--motion-ease-entrance: cubic-bezier(0.0, 0, 0.2, 1);
	--motion-ease-exit:     cubic-bezier(0.4, 0, 1, 1);
	--motion-ease-emphasis: cubic-bezier(0.2, 0, 0, 1.15);

	/* Radii */
	--radius-sm:   6px;
	--radius-md:   10px;
	--radius-lg:   12px;
	--radius-xl:   20px;
	--radius-pill: 999px;
}