/* ==========================================================================
   Charlton Live - Design Tokens
   Source of truth: build-spec.md §1. Loaded before every other stylesheet.
   Change a brand value here and it updates everywhere.
   ========================================================================== */

:root {
	/* ---------- Brand ---------- */
	--cl-red: #E4122B;          /* FILLS ONLY: buttons, play circles, badges, borders.
	                               White text on this is 4.75:1 - passes AA. */

	/* Red TEXT tokens. The brand red as text fails WCAG AA on both the ink and
	   off-white backgrounds, and it is the eyebrow/tag style on 6 of 8 designs.
	   Use these for red text; never --cl-red. Fills are unaffected, so the
	   brand is visually intact. */
	--cl-red-text: #D6112A;     /* on white 5.29:1 · on off-white 4.74:1 */
	--cl-red-on-ink: #F52A40;   /* on ink 4.65:1  (brand red would be 3.89:1) */
	--cl-ink: #17130f;          /* dark sections, body text, borders */
	--cl-off: #f5f2ee;          /* card backgrounds, alternating section fill */
	--cl-mut: #736c65;          /* secondary / meta text */
	--cl-line: #e8e3dc;         /* 1px borders and dividers */
	--cl-white: #ffffff;        /* light section backgrounds */
	--cl-body: #3a352f;         /* long-form paragraph text */
	--cl-canvas: #e6e2dc;       /* page background behind cards */

	/* ---------- On dark (ink) sections ---------- */
	--cl-dark-body: #b9b2ab;    /* paragraph text on ink */
	--cl-dark-meta: #8a827b;    /* small meta text on ink */
	--cl-nav: #e7e2dc;          /* header nav links */
	--cl-footer-body: #cfc8c1;  /* footer paragraphs and links */

	/* ---------- Accent (Etsy button in the header ONLY) ---------- */
	--cl-amber: #ffb703;

	/* ---------- Result pills ----------
	   Design specifies white text on all three. White on the original green was
	   3.49:1 and on the original grey 1.90:1 - both fail badly at 12px. Green and
	   red darkened to carry white text; the draw pill keeps its grey and takes
	   ink text instead (9.72:1). Same visual language, legible. */
	--cl-win: #177a43;          /* was #1f9d55 · white on this 5.38:1 */
	--cl-draw: #c2bbb2;         /* unchanged · uses --cl-draw-fg, not white */
	--cl-loss: #c33b41;         /* was #d0454b · white on this 5.22:1 */
	--cl-win-fg: #ffffff;
	--cl-draw-fg: var(--cl-ink);
	--cl-loss-fg: #ffffff;

	/* ---------- Type families ---------- */
	--cl-font-display: "Anton", Impact, "Haettenschweiler", sans-serif;
	--cl-font-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--cl-font-cond: "Barlow Semi Condensed", "Barlow", sans-serif;

	/* ---------- Type scale (desktop -> phone via clamp) ----------
	   Fixed px from the spec are the upper bound; lower bound is the
	   phone size from build-spec §7. */
	--cl-h1: clamp(2rem, 5vw, 3.625rem);         /* 58px -> 32px */
	--cl-h1-sub: clamp(1.875rem, 4.5vw, 3.25rem); /* 52px -> 30px, inner page heroes */
	--cl-h2: clamp(1.375rem, 3vw, 2rem);          /* 32px -> 22px */
	--cl-h3: clamp(1.125rem, 2vw, 1.625rem);      /* 26px -> 18px */

	--cl-eyebrow: 12px;
	--cl-tag: 11px;
	--cl-text: 16px;
	--cl-text-lg: 17px;
	--cl-card-title: 16px;
	--cl-meta: 13px;
	--cl-btn: 14px;

	/* ---------- Tracking ---------- */
	--cl-track-display: 0.02em;
	--cl-track-eyebrow: 0.16em;
	--cl-track-tag: 0.1em;
	--cl-track-btn: 0.04em;
	--cl-track-strap: 0.34em;   /* FOREVER ADDICKTED - the signature detail */

	/* ---------- Line heights ---------- */
	--cl-lh-display: 1.0;
	--cl-lh-tight: 1.1;
	--cl-lh-body: 1.6;

	/* ---------- Layout ---------- */
	--cl-content: 1180px;       /* inner content max-width */
	--cl-gutter: 34px;          /* section horizontal padding */

	/* ---------- Spacing ---------- */
	--cl-space-2xs: 6px;
	--cl-space-xs: 10px;
	--cl-space-sm: 14px;
	--cl-space-md: 20px;
	--cl-space-lg: 26px;
	--cl-space-xl: 36px;
	--cl-section-y: 52px;       /* standard section padding, steps down responsively */
	--cl-section-y-tight: 22px;

	/* ---------- Radii ---------- */
	--cl-radius-sm: 7px;
	--cl-radius: 12px;
	--cl-radius-lg: 16px;
	--cl-radius-pill: 100px;

	/* ---------- Borders ---------- */
	--cl-border: 1px solid var(--cl-line);
	--cl-rule: 2px solid var(--cl-ink);
	--cl-border-light: 1px solid rgba(255, 255, 255, .18);
}

/* Section padding steps down (build-spec §7: 52 -> 36 -> 28). */
@media (max-width: 980px) {
	:root { --cl-section-y: 36px; --cl-gutter: 24px; }
}
@media (max-width: 640px) {
	:root { --cl-section-y: 28px; --cl-gutter: 18px; }
}