/*
 * Chiggle Academy — design tokens.
 *
 * Source of truth for the entire visual system. Every component stylesheet
 * (homepage.css, dashboard.css, checkout.css, etc.) consumes these tokens via
 * var(--token-name). Change a value here, the whole site updates.
 *
 * Canonical reference: Brand Kit/chiggle_brand_guidelines_v4.html §02–§04.
 */

:root {
	/* ─────────────────────────────────────────────────────────────
	 * Brand palette — CANONICAL (Brand Kit §02)
	 * ───────────────────────────────────────────────────────────── */
	--navy:       #122B69;  /* Primary */
	--gold:       #FF9B03;  /* Primary accent / CTA */
	--sky:        #4A90D9;  /* Secondary accent */
	--coral:      #FF6B6B;  /* Tertiary accent / alert */
	--offwhite:   #F8F6F0;  /* Page background */
	--charcoal:   #2D2D2D;  /* Body text */
	--white:      #FFFFFF;  /* Card background */
	--gold-pale:  #FFF3DC;  /* Soft highlight */

	/* ─────────────────────────────────────────────────────────────
	 * Extended palette — derived for UI affordances (hover, depth,
	 * success states). Not in the Brand Kit; consistent with the
	 * v2 mockup (mockup/chiggle_academy_mockup.html).
	 * ───────────────────────────────────────────────────────────── */
	--navy-deep:  #0D1F4B;  /* Darker navy — top utility bars */
	--navy-light: #1A3A8A;  /* Lighter navy — hover on navy */
	--gold-hover: #E88D00;  /* Darker gold — CTA hover */
	--gold-light: #FFB740;  /* Lighter gold — gradient terminals +      */
	                        /* button hover/focus affordances. Promoted */
	                        /* v0.11.38 (brand audit): was an undocumented*/
	                        /* de-facto token (#FFB740 ×9, near-dup      */
	                        /* #ffb33d ×2 consolidated here).            */
	--gold-dark:  #8A5700;  /* AA-passing gold for text on light bgs.   */
	                        /* Contrast on white = 6.08:1, offwhite =  */
	                        /* 5.63:1, gold-pale = 5.54:1. Use whenever */
	                        /* --gold would render as text — it fails  */
	                        /* AA at ~2:1 on every light background.   */
	                        /* Added v0.9.65 (a11y round 2).           */
	--teal:       #1C7C8C;  /* Secondary tag */
	--green:      #2E7D32;  /* Success */
	--green-pale: #E8F5E9;  /* Success-background */
	--green-dark: #1F5A3A;  /* AA success TEXT on pale/tinted bg. --green */
	                        /* (#2E7D32) is only ~4.3:1 on --green-pale  */
	                        /* (AA-fail for body). Same rationale as      */
	                        /* --gold-dark. v0.11.38 (brand audit).       */
	--sky-dark:   #1F4A75;  /* AA info TEXT on pale --sky tint.           */
	/* Error/alert semantic pair. Brand §07 scopes --coral to UI accents */
	/* ONLY (never error message text — it fails contrast). These are    */
	/* the accessible error message bg/text, consolidated from ad-hoc    */
	/* checkout/feedback hexes. v0.11.38 (brand audit).                  */
	--error-pale: #FFEDED;  /* Error message background */
	--error-dark: #8A2727;  /* AA error TEXT on --error-pale (~8:1)       */

	/* Neutrals — v0.9.65 darkening pass:                              */
	/*   gray-400 was #999 (2.80:1 on white, AA-fail)                  */
	/*   gray-500 was #777 (4.48:1 on white, AA-fail by 0.02)          */
	/* Both used widely for "subdued" secondary text — darkening lifts */
	/* them above AA across the design system. Visual feel still       */
	/* "subdued grey" but readable; old values were sandtraps.         */
	--gray-100: #F5F3EE;
	--gray-200: #E8E4DC;
	--gray-300: #D1CBC0;
	--gray-400: #6E6E6E;     /* AA on white = 5.04:1 */
	--gray-500: #595959;     /* AA on white = 7.04:1 (AAA) */

	/* ─────────────────────────────────────────────────────────────
	 * Typography — CANONICAL per Brand Kit §04 (corrected v0.11.38;
	 * prior comments had the Poppins/Nunito roles inverted).
	 *
	 *   Nunito  = Display & Headings  → hero text, page titles,
	 *             course names, H1/H2.            → --font-heading
	 *   Poppins = Wordmark & Subheadings → wordmark, section headers,
	 *             card titles, UI labels, H3–H6.  → --font-display
	 *   DM Sans = Body & UI → body, captions, buttons, nav.
	 *
	 * Only the big-title surfaces were on the wrong face (Poppins
	 * where §04 wants Nunito). --font-display stays Poppins because
	 * its ~80 usages are overwhelmingly the cards/sections/wordmark
	 * /UI labels that §04 *correctly* assigns to Poppins; the fix is
	 * additive — `--font-heading` is applied to hero + H1/H2 only
	 * (global.css override + the hero class). `--font-accent` is a
	 * legacy alias kept pointing at the headings face (its few uses
	 * were Nunito and stay Nunito).
	 * ───────────────────────────────────────────────────────────── */
	--font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-heading: 'Nunito',  'DM Sans', sans-serif;
	--font-display: 'Poppins', 'DM Sans', sans-serif;
	--font-accent:  var(--font-heading);

	/* ─────────────────────────────────────────────────────────────
	 * Radii (from v2 mockup)
	 * ───────────────────────────────────────────────────────────── */
	--radius-sm:  8px;
	--radius-md: 14px;
	--radius-lg: 20px;
	--radius-xl: 28px;

	/* ─────────────────────────────────────────────────────────────
	 * Shadows (from v2 mockup) — all use navy at low alpha for
	 * brand-coherent depth.
	 * ───────────────────────────────────────────────────────────── */
	--shadow-sm: 0  1px  3px rgba(18, 43, 105, 0.06);
	--shadow-md: 0  4px 16px rgba(18, 43, 105, 0.08);
	--shadow-lg: 0  8px 32px rgba(18, 43, 105, 0.12);
	--shadow-xl: 0 16px 48px rgba(18, 43, 105, 0.16);

	/* ─────────────────────────────────────────────────────────────
	 * Responsive container system — multi-breakpoint scaling.
	 *
	 * Container width scales UP at wider viewports so content
	 * always fills sensibly. Padding scales DOWN at narrower
	 * viewports so content breathes on small screens.
	 *
	 * Defaults (mobile-first):
	 *   --container-max:     1280px   (laptop default)
	 *   --container-padding: 32px
	 *
	 * Step-ups at wider viewports:
	 *   ≥1440px: container 1360px
	 *   ≥1600px: container 1520px
	 *   ≥1920px: container 1700px
	 *   ≥2400px: container 1900px
	 *
	 * Padding step-downs at narrower viewports:
	 *   ≤1024px: 24px
	 *   ≤480px:  16px
	 *
	 * Computed margins from viewport edge at each anchor:
	 *   1280: ~24px margin
	 *   1366: ~24px margin (viewport-bound)
	 *   1440: 40px margin
	 *   1600: 40px margin
	 *   1920: 110px margin
	 *   2560: 330px margin
	 * ───────────────────────────────────────────────────────────── */
	--container-max: 1280px;
	--container-padding: 32px;
}

@media (max-width: 1024px) {
	:root { --container-padding: 24px; }
}
@media (max-width: 480px) {
	:root { --container-padding: 16px; }
}

/* Step-ups for wider screens. */
@media (min-width: 1440px) {
	:root { --container-max: 1360px; }
}
@media (min-width: 1600px) {
	:root { --container-max: 1520px; }
}
@media (min-width: 1920px) {
	:root { --container-max: 1700px; }
}
@media (min-width: 2400px) {
	:root { --container-max: 1900px; }
}