/*
 * Bricks Enlighten — design tokens (CSS custom properties).
 *
 * Mirrors ../Enlighten Mobility Design System/colors_and_type.css as the
 * canonical source of truth for color, typography, spacing, radius, shadow,
 * motion, and layout values. Triple-sourced: these tokens, theme.json, and
 * Bricks Variables must all agree.
 *
 * DO NOT hardcode these values in Bricks elements — always reference the
 * variable (via Bricks Variables UI) or a Global Class that references them.
 */

:root {
	/* ---------- Color — raw palette ---------- */
	--gold:          #FFD05B;
	--gold-deep:     #E8B23A;
	--light-grey:    #D9D9D9;
	--white:         #FFFFFF;
	--canvas:        #FBF7EE;
	--ink:           #1B1A17;
	--ink-2:         #2B2A26;
	--mute:          #6B655A;
	--gold-tint-15:  rgba(255, 208, 91, 0.15);
	--ink-tint-08:   rgba(27, 26, 23, 0.08);
	--warn-red:      #B33A1F;
	--canvas-warm:   #FAF4E6;  /* One whisper deeper than --canvas; warm-institutional chapter panel (Apr 2026) */

	/* ---------- Color — semantic aliases ---------- */
	--bg-page:                 var(--canvas);
	--bg-surface:              var(--white);
	--bg-dark:                 var(--ink);
	--bg-dark-2:               var(--ink-2);
	--fg-1:                    var(--ink);
	--fg-2:                    var(--mute);
	--fg-on-dark:              var(--canvas);
	--fg-on-dark-2:            rgba(251, 247, 238, 0.75);
	--accent:                  var(--gold);
	--accent-deep:             var(--gold-deep);
	--border-faint:            var(--light-grey);
	--border-translucent-dark: rgba(255, 255, 255, 0.12);

	/* ---------- Typography — families & weights ---------- */
	--font-sans:    'Sen', system-ui, -apple-system, Arial, sans-serif;
	--font-logo:    'Lemon Milk', 'Space Grotesk', 'Sen', sans-serif;
	--fw-regular:   400;
	--fw-bold:      700;
	--fw-extrabold: 800;

	/* ---------- Typography — tracking ---------- */
	--track-eyebrow:    0.08em;
	--track-stat-label: 0.06em;

	/* ---------- Typography — desktop type scale ---------- */
	--fs-display:    64px;  --lh-display:    1.1;
	--fs-h2:         44px;  --lh-h2:         1.2;
	--fs-h3:         26px;  --lh-h3:         1.3;
	--fs-quote:      28px;  --lh-quote:      1.4;
	--fs-stat:       80px;  --lh-stat:       1;
	--fs-stat-label: 13px;  --lh-stat-label: 1.3;
	--fs-eyebrow:    13px;  --lh-eyebrow:    1;
	--fs-body:       18px;  --lh-body:       1.6;
	--fs-caption:    14px;  --lh-caption:    1.5;
	--fs-button:     16px;  --lh-button:     1;
	--fs-nav:        15px;  --lh-nav:        1;

	/* ---------- Spacing — 4px base scale ---------- */
	--space-1:  4px;
	--space-2:  8px;
	--space-3:  12px;
	--space-4:  16px;
	--space-5:  24px;
	--space-6:  32px;
	--space-7:  48px;
	--space-8:  64px;
	--space-9:  96px;
	--space-10: 120px;

	/* ---------- Radius ---------- */
	--radius-pill:    999px;
	--radius-image:   16px;
	--radius-card:    20px;
	--radius-feature: 24px;
	--radius-input:   12px;

	/* ---------- Shadow ---------- */
	--shadow-rest:  0 4px 20px rgba(27, 26, 23, 0.06);
	--shadow-hover: 0 8px 28px rgba(27, 26, 23, 0.10);

	/* ---------- Motion (duration + easing combined) ---------- */
	--motion-fast: 120ms ease-out;
	--motion-base: 240ms ease-out;
	--motion-slow: 480ms ease-out;

	/* ---------- Layout ----------
	   v7 (May 2026): gutters fluid-scaled via clamp(min, 5vw, max).
	   The static 24/16px values held content too tight against the
	   viewport edge once viewport ≤ content-max (1600px) — at 1440px
	   desktop, content was ~24px from glass, which read as cramped.
	   5vw rhythm produces:
	     320px  → 20px (mobile floor)
	     768px  → 32px (mobile ceiling hit)
	     1280px → 64px desktop
	     1600px → 80px desktop
	     1920px → 96px (desktop ceiling hit)
	   --gutter-mobile is consumed by @media ≤959px overrides, which
	   is why its clamp peaks at 32px (matching the breakpoint).
	*/
	--content-max:        1600px;
	--gutter:             clamp(32px, 5vw, 96px);
	--gutter-mobile:      clamp(20px, 5vw, 32px);
	--nav-height-desktop: 88px;
	--nav-height-mobile:  56px;
}

/* ---------- Mobile type-scale overrides ---------- */
@media ( max-width: 960px ) {
	:root {
		--fs-display:    40px;  --lh-display: 1.15;
		--fs-h2:         32px;  --lh-h2:      1.25;
		--fs-h3:         22px;
		--fs-quote:      22px;
		--fs-stat:       56px;
		--fs-stat-label: 12px;
		--fs-eyebrow:    12px;
		--fs-body:       17px;
		--fs-caption:    13px;
		--fs-nav:        16px;
	}
}

/* ---------- Reduced-motion override ---------- */
@media ( prefers-reduced-motion: reduce ) {
	:root {
		--motion-fast: 0ms;
		--motion-base: 0ms;
		--motion-slow: 0ms;
	}
}