/* EWB Courses — design tokens (CSS custom properties).
   These map 1:1 to the locked brand system in BRIEF.md.
   Do not redefine these elsewhere. */

:root {
	/* ---------- Colors ---------- */
	--navy-deep:  #0A1330;
	--navy-light: #101A40;
	--cyan:       #00B8FF;
	--lime:       #A6FF00;
	--white:      #FFFFFF;
	--grey-light: #B8C0D0;
	--grey-dark:  #1F2328;
	--beige:      #F5F1E5;

	/* Semantic aliases */
	--color-bg:           var(--navy-deep);
	--color-bg-alt:       var(--navy-light);
	--color-bg-light:     var(--beige);
	--color-surface:      var(--navy-light);
	--color-text:         var(--white);
	--color-text-muted:   var(--grey-light);
	--color-text-dark:    var(--grey-dark);
	--color-accent:       var(--cyan);
	--color-cta:          var(--lime);
	--color-border:       rgba(255, 255, 255, 0.08);
	--color-border-strong:rgba(255, 255, 255, 0.18);
	--color-focus:        var(--cyan);

	/* ---------- Typography ---------- */
	--font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Fluid type scale */
	--fs-h1:      clamp(2.25rem, 5vw, 4rem);
	--fs-h2:      clamp(1.75rem, 3.5vw, 2.75rem);
	--fs-h3:      clamp(1.375rem, 2.4vw, 1.875rem);
	--fs-h4:      clamp(1.125rem, 1.6vw, 1.375rem);
	--fs-body:    clamp(1rem, 1.05vw, 1.0625rem);
	--fs-small:   0.875rem;
	--fs-xs:      0.75rem;

	--lh-tight:   1.15;
	--lh-snug:    1.3;
	--lh-base:    1.6;
	--lh-loose:   1.75;

	/* Weights */
	--fw-regular:  400;
	--fw-medium:   500;
	--fw-semibold: 600;
	--fw-bold:     700;
	--fw-black:    900;

	/* ---------- Spacing (geometric) ---------- */
	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-5:  1.5rem;
	--space-6:  2rem;
	--space-7:  2.5rem;
	--space-8:  3rem;
	--space-9:  4rem;
	--space-10: 5rem;
	--space-11: 5.5rem;
	--space-12: 6rem;

	/* ---------- Radii ---------- */
	--radius-sm:   6px;
	--radius-md:   10px;
	--radius-lg:   16px;
	--radius-pill: 999px;

	/* ---------- Shadows ---------- */
	--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px 1px rgba(0, 0, 0, 0.15);
	--shadow-2: 0 10px 30px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.18);
	--shadow-glow: 0 0 0 4px rgba(0, 184, 255, 0.18);

	/* ---------- Layout ---------- */
	--container-max: 1200px;
	--container-px:  clamp(1rem, 3vw, 1.75rem);

	--header-h:      72px;
	--header-h-sm:   60px;

	/* ---------- Motion ---------- */
	--ease:      cubic-bezier(0.2, 0.8, 0.2, 1);
	--dur-fast:  150ms;
	--dur:       250ms;
	--dur-slow:  400ms;

	/* ---------- Z layers ---------- */
	--z-header:  100;
	--z-menu:    110;
	--z-modal:   1000;
	--z-toast:   1100;
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 0ms;
		--dur:      0ms;
		--dur-slow: 0ms;
	}
}