/**
 * ToyTool design tokens.
 * Mobile-first. Plain CSS custom properties — no preprocessor.
 * Primary color / content widths are also exposed via the Customizer
 * (inc/customizer.php), which prints an inline override for these same
 * variables — see inc/enqueue.php.
 */
:root {
	/* Brand */
	--tt-primary: #2563EB;
	--tt-primary-hover: #1D4ED8;
	--tt-primary-contrast: #FFFFFF;

	/* Text */
	--tt-text: #111827;
	--tt-heading: #0F172A;
	--tt-muted: #6B7280;
	--tt-link: var(--tt-primary);

	/* Surfaces */
	--tt-background: #FFFFFF;
	--tt-light-background: #F5F7FA;
	--tt-light-blue: #EAF6FF;
	--tt-light-purple: #F4F0FF;
	--tt-border: #E5E7EB;
	--tt-footer: #071120;
	--tt-footer-text: #C7D0DE;
	--tt-sale: #DC2626;

	/* Radius */
	--tt-radius-sm: 8px;
	--tt-radius-md: 12px;
	--tt-radius-lg: 20px;
	--tt-radius-pill: 999px;

	/* Layout */
	--tt-content-width: 768px;
	--tt-wide-width: 1280px;
	--tt-container-padding: 1rem;
	--tt-section-spacing: 4rem;
	--tt-block-spacing: 1.5rem;

	/* Type */
	--tt-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--tt-font-heading: "Sora", var(--tt-font-body);

	--tt-h1: clamp(2rem, 5vw + 1rem, 3rem);
	--tt-h2: clamp(1.5rem, 3vw + 0.8rem, 2.25rem);
	--tt-h3: clamp(1.25rem, 2vw + 0.6rem, 1.5rem);
	--tt-h4: 1.125rem;
	--tt-h5: 1rem;
	--tt-h6: 0.875rem;
	--tt-body: 1rem;
	--tt-small: 0.875rem;

	--tt-line-height: 1.6;
	--tt-line-height-heading: 1.2;

	/* Buttons */
	--tt-button-radius: var(--tt-radius-pill);
	--tt-button-padding-y: 0.75em;
	--tt-button-padding-x: 1.75em;

	/* Cards */
	--tt-card-bg: var(--tt-background);
	--tt-card-border: var(--tt-border);
	--tt-card-radius: var(--tt-radius-lg);
	--tt-card-shadow: 0 2px 6px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.05);
	--tt-card-shadow-hover: 0 16px 32px rgba(15, 23, 42, 0.12);

	/* Dark, full-bleed sections (see .tt-section--contrast in base.css) —
	   same navy the footer already uses, so this isn't a new color. */
	--tt-contrast-bg: var(--tt-footer);
	--tt-contrast-text: var(--tt-footer-text);

	/* Touch targets */
	--tt-touch-target: 44px;

	/* Breakpoints (documented here for reference; media queries can't read custom properties) */
	/* mobile: 320px+ | large-mobile: 480px+ | tablet: 768px+ | desktop: 1024px+ | large-desktop: 1280px+ | xl: 1440px+ */
}