/* =============================================================
   DESIGN TOKENS — "Askwell"
   Plain-spoken, modern, unmystical identity built around a sorted
   question-bank library rather than a mystical "reading" funnel.
   Charcoal-slate + cool near-white canvas, emerald-mint CTAs, warm-coral
   decorative accents. Deliberately drops the gold/serif register every
   close sibling in this cluster uses — Outfit (heading) + Source Sans 3
   (body), a geometric sans display face, is itself a differentiator here.

   Contrast verified (WCAG AA, 4.5:1 body-text floor):
     text    #232A34 on bg #FFFFFF      -> 15.7:1
     text    #232A34 on bg-alt #F6F8F9  -> 14.6:1
     muted   #5B6472 on bg #FFFFFF      -> 6.6:1
     accent-text #0A6E4E on bg #FFFFFF  -> 6.3:1  (safe for links/inline text)
     accent  #12B886 on bg #FFFFFF      -> 2.5:1  (buttons only, paired with
                                                    dark text — never used as
                                                    the text color itself)
     primary-text (white) on accent bg  -> 2.5:1  (fails — buttons on accent
                                                    use dark text instead, see
                                                    components.css .btn--primary)
     dark text #232A34 on accent bg     -> 5.7:1  (passes — the button pairing
                                                    actually used)
     light text on footer bg #232A34    -> 15.7:1
     highlight #F4785C is decorative only (borders, badges, hover accents) —
     never used as small text on a light background (its own contrast is
     ~2.7:1, below AA for text).
   ============================================================= */

:root {
	/* ---------- Brand colors (exact spec values) ---------- */
	--color-primary: #232A34;      /* charcoal-slate — headings, footer, dark buttons */
	--color-secondary: #F6F8F9;    /* cool near-white — page background */
	--color-accent: #12B886;       /* emerald-mint — CTA backgrounds, checkmarks, badges */
	--color-highlight: #F4785C;    /* warm coral — decorative accents, hover, underlines */

	/* ---------- Derived shades ---------- */
	--color-primary-light: #3A4453;
	--color-primary-dark: #171B22;
	--color-secondary-dark: #EBEFF1;

	--color-accent-hover: #0EA372;
	--color-accent-light: #E4F7F0;
	--color-accent-text: #0A6E4E;   /* AA-safe darker mint for inline links/text */

	--color-highlight-hover: #E5654A;
	--color-highlight-light: #FDEAE5;

	--color-white: #FFFFFF;
	--color-text: #232A34;
	--color-text-muted: #5B6472;
	--color-text-faint: #88919C;
	--color-border: #E1E6E9;
	--color-border-dark: #C7CED2;

	--color-bg: #FFFFFF;
	--color-bg-alt: #F6F8F9;
	--color-footer-bg: #232A34;
	--color-footer-text: #C7CED2;
	--color-footer-text-muted: #8A93A0;

	--color-danger: #D64545;

	/* ---------- Type ---------- */
	--font-heading: 'Outfit', system-ui, -apple-system, sans-serif;
	--font-body: 'Source Sans 3', system-ui, -apple-system, sans-serif;
	--fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800;

	--text-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
	--text-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
	--text-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
	--text-h4: 1.25rem;
	--text-h5: 1.0625rem;
	--text-lg: 1.125rem;
	--text-body: 1rem;
	--text-sm: 0.875rem;
	--text-xs: 0.75rem;

	--lh-tight: 1.15;
	--lh-snug: 1.35;
	--lh-normal: 1.6;
	--lh-relaxed: 1.75;
	--ls-tight: -0.02em;

	/* ---------- Rhythm (4px base) ---------- */
	--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
	--space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
	--space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

	/* ---------- Containers ---------- */
	--container-max: 1200px;
	--container-medium: 960px;
	--container-narrow: 760px;
	--gutter: 24px;

	/* ---------- Radius ---------- */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-xl: 22px;
	--radius-full: 9999px;

	/* ---------- Shadows ---------- */
	--shadow-xs: 0 1px 2px rgba(35, 42, 52, .06);
	--shadow-sm: 0 2px 6px rgba(35, 42, 52, .08);
	--shadow-md: 0 8px 20px rgba(35, 42, 52, .10);
	--shadow-lg: 0 16px 40px rgba(35, 42, 52, .14);
	--shadow-xl: 0 28px 64px rgba(35, 42, 52, .18);

	/* ---------- Motion ---------- */
	--ease: cubic-bezier(.4, 0, .2, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--transition-fast: 120ms var(--ease);
	--transition-normal: 200ms var(--ease);
	--transition-slow: 360ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--transition-fast: 1ms;
		--transition-normal: 1ms;
		--transition-slow: 1ms;
	}
}