/* ============================================================
   POP Interactive — Responsive System v1 Token Pack
   ============================================================
   Step 3 of Responsive System v1 retrofit (2026-04-26).
   Source: Andie's Token Pack v1
   (`01-Strategy-Planning/POP-Responsive-System-v1-Token-Pack.md`)

   This file is enqueued globally at priority 4 — before
   theme-accessibility.css (priority 5) and before any per-page
   CSS. Every page inherits these tokens.

   All fluid tokens are WCAG 1.4.4 zoom-safe (rem-based,
   max ≤ 2× min on text tokens; the two layout-spacing tokens
   that exceed 2× are out of WCAG 1.4.4 scope per Alice's
   validation note in the Token Pack §1).

   Fluid tokens automatically cap at 1440px viewport by
   construction (each clamp() reaches its max at 1440), so the
   1440 viewport cap from Commitment 1 is satisfied per-token
   with no additional media query needed.
   ============================================================ */

:root {

	/* === Type scale — fluid (320 → 1440 anchor) === */
	--type-hero-xl: clamp(2.75rem, calc(1.96rem + 3.93vw), 5.5rem);   /* 44  → 88  */
	--type-hero-l:  clamp(2.5rem,  calc(1.86rem + 3.21vw), 4.75rem);  /* 40  → 76  */
	--type-hero-m:  clamp(2.25rem, calc(1.82rem + 2.14vw), 3.75rem);  /* 36  → 60  */
	--type-display: clamp(2rem,    calc(1.57rem + 2.14vw), 3.5rem);   /* 32  → 56  */
	--type-h2-xl:   clamp(2rem,    calc(1.64rem + 1.79vw), 3.25rem);  /* 32  → 52  */
	--type-h2-l:    clamp(1.75rem, calc(1.50rem + 1.25vw), 2.625rem); /* 28  → 42  */
	--type-h3:      clamp(1.375rem, calc(1.27rem + 0.54vw), 1.75rem); /* 22  → 28  */
	--type-h4:      clamp(1.125rem, calc(1.09rem + 0.18vw), 1.25rem); /* 18  → 20  */

	/* === Type scale — fixed === */
	--type-h5:       1rem;        /* 16 */
	--type-h6:       0.875rem;    /* 14 */
	--type-body-l:   1.125rem;    /* 18 — lead paragraph, intro copy */
	--type-body-m:   1rem;        /* 16 — default body */
	--type-body-s:   0.9375rem;   /* 15 — card body, secondary copy */
	--type-caption:  0.875rem;    /* 14 — caption, metadata, nav UI */
	--type-eyebrow:  0.8125rem;   /* 13 — section eyebrow, breadcrumb */
	--type-micro:    0.75rem;     /* 12 — footer fine print, smallest UI */

	/* === Spacing scale — fluid === */
	--space-section-xl:    clamp(4rem,    calc(3.0rem + 5.0vw),   7.5rem);   /* 64  → 120 */
	--space-section-l:     clamp(3rem,    calc(2.14rem + 4.29vw), 6rem);     /* 48  → 96  */
	--space-section-m:     clamp(2.5rem,  calc(1.93rem + 2.86vw), 4.5rem);   /* 40  → 72  */
	--space-section-s:     clamp(2rem,    calc(1.57rem + 2.14vw), 3.5rem);   /* 32  → 56  */
	--space-container-pad: clamp(1.5rem,  calc(0.86rem + 3.21vw), 3.75rem);  /* 24  → 60  */
	--space-gutter-xl:     clamp(2rem,    calc(1.14rem + 4.29vw), 5rem);     /* 32  → 80  */
	--space-gutter-l:      clamp(1.5rem,  calc(1.07rem + 2.14vw), 3rem);     /* 24  → 48  */
	--space-gutter-m:      clamp(1rem,    calc(0.86rem + 0.71vw), 1.5rem);   /* 16  → 24  */

	/* === Spacing scale — fixed === */
	--space-gutter-s:      1rem;       /* 16 */
	--space-gutter-xs:     0.5rem;     /*  8 */
	--space-component-l:   2.5rem;     /* 40 */
	--space-component-m:   1.5rem;     /* 24 */
	--space-component-s:   1rem;       /* 16 */
	--space-stack-l:       2rem;       /* 32 */
	--space-stack-m:       1.25rem;    /* 20 */
	--space-stack-s:       0.75rem;    /* 12 */

	/* === Layout === */
	--container-max:       82.5rem;    /* 1320 — main content cap */
	--viewport-cap:        90rem;      /* 1440 — system viewport cap */

	/* === Line-height === */
	--lh-display:      0.96;
	--lh-heading:      1.08;
	--lh-subheading:   1.2;
	--lh-body-tight:   1.5;
	--lh-body:         1.65;
	--lh-body-loose:   1.75;

	/* === Letter-spacing === */
	--ls-display-tight: -0.03em;
	--ls-display:       -0.02em;
	--ls-heading:       -0.01em;
	--ls-body:          0;
	--ls-eyebrow:       0.15em;
	--ls-nav:           0.1em;
	--ls-footer:        0.08em;

	/* === Weight === */
	--fw-black:      900;
	--fw-extrabold:  800;
	--fw-bold:       700;
	--fw-semibold:   600;
	--fw-medium:     500;
	--fw-regular:    400;
}


/* ============================================================
   1440 viewport cap — placeholder media query.
   Each fluid token already caps at 1440 via clamp() max value.
   This block is reserved for future cross-token cap behavior
   (e.g., explicit max viewport for grid container). No
   per-token caps needed — clamp() handles it.
   ============================================================ */
@media (min-width: 90rem) {
	:root {
		/* Reserved for future system-wide cap behavior. */
	}
}