/**
 * Design Tokens — lrxd theme
 *
 * Single source of truth for all CSS custom properties.
 * Enqueued before style.css and theme.css so every later rule
 * can resolve var(--…) references.
 *
 * No @layer — project decision: tokens + delete-legacy, no cascade layers.
 *
 * ─── Website 2.0 reskin (#121) ─────────────────────────────────────────────
 * Repointed per docs/design/03-website-2.0-build-plan.md §2 (SIGNED OFF
 * 2026-07-17): semantic tokens now hold the CG cream/ink/rust palette,
 * the new brand-rhythm + type + button/form values, and the CG palette +
 * semantic aliases used by new component CSS. Legacy raw tints (orange /
 * green / aqua / violet4-10) are left defined and repointed to the nearest
 * CG neutral so mid-migration legacy pages don't break — they are deleted
 * in the legacy quarantine (backlog #72). --space-1..12 (generic 10px-step
 * utilities) are unchanged; CG's off-grid rhythm values live in their own
 * named tokens below, never rounded into --space-*.
 *
 * BROKEN-TOKEN FIXES (preserved zero visual change, pre-2.0):
 *
 * 1. --violer10  →  renamed to --violet10 (same hex #af8ae3).
 *    Its one usage (style.css .benefit-item .icon-wrap) updated to var(--violet10).
 *
 * 2. --blue / --headings-color
 *    --headings-color: var(--blue) referenced an undefined --blue, making the
 *    property invalid-at-computed-value-time (IACVT). For the inherited `color`
 *    property, IACVT causes headings to inherit color from their nearest ancestor.
 *    Fix: --headings-color: currentColor — semantically identical to the IACVT
 *    fallback. --blue is also defined (as var(--violet)) for named-token completeness.
 *
 * 3. --time-sm
 *    Used in theme.css:147 but never defined; resolved to 0s (instant transition).
 *    Fixed: --time-sm: 0.15s (half of --time: 0.3s). Affects only transition timing,
 *    not static appearance.
 */

:root {

	/* ─── Color palette ─────────────────────────────────────────────────── */

	--black:      #000;
	--dark-gray:  #383838;
	--gray:       #e4e4e4;
	--white:      #fff;

	/* Violet / brand primaries — repointed to Website 2.0 cream/ink/rust (§2a).
	   Names kept for the heavy legacy `var(--violetN)` usage across style.css;
	   retired in the #72 legacy quarantine. */
	--violet:     #0E0E0C; /* was #2d1f45 — primary brand → ink */
	--violet2:    #E3581D; /* was #7a28cb — primary CTA → rust accent */
	--violet3:    #D9D5CC; /* was #ba95eb — accents / form borders / button hover → soft border */
	--violet4:    #D9D5CC; /* was #e0d0f3 (light tint bg) — nearest CG neutral: border */
	--violet5:    #F5F5F5; /* was #fbf7ff (near-white tint) — nearest CG neutral: cream */
	--violet7:    #999999; /* was #bca7d8 (muted purple) — nearest CG neutral: grey */
	--violet8:    #F5F5F5; /* was #f4eafe (lightest tint) — nearest CG neutral: cream */
	--violet9:    #0E0E0C; /* was #6b25be (deep purple accent) — nearest CG neutral: ink */
	--violet10:   #999999; /* was #af8ae3 (icon color); renamed from --violer10 (typo fix) — nearest CG neutral: grey */

	/* Named alias — defined for token completeness; see --headings-color note above */
	--blue:       var(--violet);

	/* Orange — not brand; repointed to nearest CG neutral, retire in #72 */
	--orange1:    #6B6860;
	--orange2:    #6B6860;
	--orange3:    #6B6860;

	/* Green — not brand; repointed to nearest CG neutral, retire in #72 */
	--green:      #3A3A36;
	--green2:     #3A3A36;
	--green3:     #3A3A36;

	/* Aqua — not brand; repointed to nearest CG neutral, retire in #72 */
	--aqua:       #999999;

	/* ─── CG palette (Website 2.0) ──────────────────────────────────────── */

	--cg-ink:       #0E0E0C;
	--cg-ink-85:    #1E1E1C;
	--cg-ink-70:    #3A3A36;
	--cg-cream:     #F5F5F5;
	--cg-rust:      #E3581D;
	--cg-grey:      #999999;
	--cg-border:    #D9D5CC;
	--cg-muted:     #6B6860;
	--cg-white:     #FFFFFF; /* photo-caption text on a dark image scrim (Services image-band, #125) — distinct from --cg-cream, matches services.html `.icap` literally */

	/*
	 * Editorial-warning yellow. NOT a brand colour and never to be used as
	 * one — it exists so unfinished copy reads as unfinished on screen
	 * (`.cg-tmp-copy`). Deliberately outside the palette above so a future
	 * palette change cannot quietly make it blend in; same reasoning as the
	 * raw hex in hero.css's `.cg-placeholder`, but tokenised because this one
	 * is referenced from component CSS.
	 */
	--cg-yellow:    #FFD400;

	/* Semantic aliases — component CSS references these, not raw hex */
	--surface:              var(--cg-cream);
	--surface-dark:         var(--cg-ink);
	--text:                 var(--cg-ink);
	--accent:               var(--cg-rust);
	--rule:                 var(--cg-border);
	--rule-strong:          var(--cg-grey);
	--rule-on-dark:         rgba(245, 245, 245, 0.16);
	--rule-on-rust:         rgba(245, 245, 245, 0.5);   /* Approach Four Stages divider (#136) */
	--stagenum-on-rust:     rgba(245, 245, 245, 0.34);  /* Approach Four Stages big numeral (#136) */
	--body-on-rust:         rgba(245, 245, 245, 0.78);  /* Approach Four Stages card copy (#136) */
	--text-on-dark-muted:   #9A968D;
	--cg-cream-90:          rgba(245, 245, 245, 0.9); /* sticky-nav bar backdrop (#52) */
	--cg-cream-0:           rgba(245, 245, 245, 0);   /* hero legibility scrim fade-out (#123) */

	/* Global module-box rollover */
	--box-hover-cream:  #FBFAF6;
	--box-hover-ink:    #1B1B17;
	--box-hover-rust:   #D2592E;

	/* Home hero video "no video assigned" gradient fallback (#65) — the
	   reference (home.html `.hero-media`) shows this radial gradient only
	   as a placeholder behind the "Drop the brand showreel here" comment;
	   kept as named tokens (not raw hex in component CSS) per the CG
	   component-library convention (docs/2.0-system-guide.md §2). */
	--cg-hero-video-fallback-1: #1a5a51;
	--cg-hero-video-fallback-2: #0c302c;
	--cg-hero-video-fallback-3: #0B0B0A;

	/* ─── Motion ────────────────────────────────────────────────────────── */

	--ease:       ease-out;
	--time:       0.3s;
	--time-sm:    0.15s; /* fix: was undefined in theme.css; intent = shorter transition */

	/* ─── Base layout ───────────────────────────────────────────────────── */

	--base-text-color:        #0E0E0C; /* ink — was var(--violet) #2d1f45 */
	--base-background-color:  #F5F5F5; /* cream — was #fff */
	--trim:                   0 84px;  /* full-bleed origin — was 0 30px */
	--base-min-width:         320px;
	--max-container-width:    1314px;  /* CG content frame — was 1225px */
	--h-header:               100px;

	/* Height of the inline logo lockup (images/cg/logo-lockup.svg), used by the
	   header bar, the sticky bar and the footer.
	   NOT the nav overlay: `.cg-menu__logo svg` hardcodes 38px (and 28px below
	   the small breakpoint) in css/components/header.css. Before this token
	   existed everything was 38px and they agreed by accident; they no longer
	   do, so opening the hamburger shrinks the lockup from 56px to 38px. Wiring
	   the overlay to this token is the obvious fix and is deliberately NOT done
	   here — the overlay has to fit one viewport with no scrolling (see
	   CLAUDE.md -> Header and navigation) and growing its logo by 18px has not
	   been measured against that. Left as a known mismatch rather than an
	   unverified change to the nav. Raised from 38px
	   on 2026-08-21: at 38px the wordmark's x-height was ~7 device pixels on a 1x
	   display and the lockup read as pixelated — the VECTOR one, not just the
	   sprite intro, so this is a size problem and not a rasterisation one. 56px is
	   free above 820px (--h-header's min-height already reserves 100px, and a 56px
	   logo plus 2x20px padding is 96px), which is why it is not larger: 64px is the
	   first value that grows the bar.
	   Read by `.cg-logo svg` and by the intro overlay in
	   css/components/logo-intro.css — changing it moves both together. */
	--cg-logo-h:              56px;
	--scrollbar:              0;

	/* ─── Named brand-rhythm tokens (Website 2.0) ────────────────────────── */
	/* Off-grid values from the design brief — do NOT round into --space-*.   */

	--section-pad:    96px;   /* every band top & bottom */
	--eyebrow-gap:    34px;   /* eyebrow → statement (media.html rendered gap) */
	--gutter-outer:   84px;   /* logo/footer inset + band origin */
	--content-w:      1314px; /* centered frame width */
	--pad-x:          max(84px, (100vw - 1314px) / 2); /* responsive gutter — 100vw, not 100% */
	--split-left:     600px;  /* 2-col eyebrow-statement/body split */
	--split-gap:      105px;
	--box-pad:        44px;   /* bordered-box law */
	--box-border:     1px;
	--hairline:       1px;

	/*
	 * Fade law (sitewide). Entering a hover/active state is quick, leaving it
	 * is unhurried — the asymmetry is what makes a rollover feel considered
	 * rather than twitchy. Applied by giving the resting state --fade-out and
	 * the :hover state --fade-in (see css/components/motion.css).
	 */
	--fade-in:        250ms;
	--fade-out:       500ms;
	--fade-ease:      ease-in-out;
	--radius:         0;      /* hard edges */
	--hero-l:         140px;  /* hero-only left-edge exception */
	--content-edge:   max( calc( clamp( 24px, 5vw, 84px ) + clamp( 0px, 3vw, 56px ) ), var( --pad-x ) );  /* frame inset — floors at the clamp sum (~140px) but never narrower than the centered 1314 frame gutter (--pad-x), so content never spills past the frame on wide viewports */

	/* ─── Typography — families ─────────────────────────────────────────── */

	--font-serif:      "Noe Text", "Hoefler Text", Georgia, "Times New Roman", serif;
	--font-sans:       "Averta Std", Arial, "Helvetica Neue", Helvetica, sans-serif;
	--font-body:       var(--font-sans);         /* was "42dot Sans" — body copy now Averta Std (designer 2026-07-22, #197) */
	--font-condensed:  "Tungsten Narrow", "Bebas Neue", "Arial Narrow", sans-serif; /* Tungsten Narrow — genuine licensed webfont (#301); self-hosted Bebas Neue (#198) kept as the condensed-metric fallback if Tungsten fails to load */
	--font-legal:      "Inter", Arial, "Helvetica Neue", Helvetica, sans-serif;

	--base-font-sans-serif:         var(--font-sans);         /* was "AT Surt" — Averta for labels/nav/buttons */
	--base-font-sans-second-serif:  var(--font-serif);        /* was "AT Surt Expanded" — headings = Noe */
	--heading-font-serif:           var(--font-serif);        /* was "Hoefler Text" — Noe */
	--base-font-serif:              var(--font-serif);        /* was "Roboto Slab" fallback — Noe */
	--base-font-family:             var(--font-body);         /* body copy — now Averta Std via --font-body (#197) */

	/* ─── Typography — base ─────────────────────────────────────────────── */

	--font-size-base:   16px;  /* unchanged — already matches CG body */
	--line-height-base: 1.74;  /* was 1.625 — CG body lede */

	/* ─── Typography — type scale ───────────────────────────────────────── */

	--h1-font-size:  clamp(48px, 7.6vw, 132px); /* was 70px — display/hero */
	--h2-font-size:  clamp(32px, 3vw, 56px);    /* was 60px — section statement */
	--h3-font-size:  clamp(24px, 2vw, 28px);    /* was 50px — card title */
	--h4-font-size:  22px; /* was 38px — sub-role; reference pages win when built */
	--h5-font-size:  15px; /* was 20px — sub-role; reference pages win when built */
	--h6-font-size:  10px; /* was 18px — caps sub-role; reference pages win when built */
	--subtitle-1:    32px;
	--subtitle-2:    24px;
	--body-1:        28px;

	/* ─── Headings ──────────────────────────────────────────────────────── */

	--headings-font-family:  var(--base-font-sans-second-serif);

	/* #302 — H1's own condensed-family token. --font-condensed (:166) ALSO
	   resolves to Tungsten Narrow now (#304 repointed it) — the two are
	   kept separate deliberately, not duplicated by accident: this one's
	   fallback chain has no Bebas Neue, since a heading shouldn't drop to
	   a display-only condensed face if Tungsten fails, the way a giant
	   decorative word reasonably can. */
	--font-narrow:      "Tungsten Narrow", "Arial Narrow", sans-serif; /* #302 */
	--h1-font-family:   var(--font-narrow); /* H1 = Tungsten Narrow Bold (#302) */
	--h2-font-family:   var(--font-sans);   /* H2 = Averta Std Semibold (#302) */

	/*
	 * --headings-color: currentColor
	 *
	 * Repointed from var(--blue) which was undefined (IACVT).
	 * `color: currentColor` on the CSS `color` property resolves to the
	 * inherited value — exactly matching the previous IACVT fallback behaviour.
	 */
	--headings-color:        currentColor;

	/* ─── Links ─────────────────────────────────────────────────────────── */

	--base-link-color:  #0E0E0C; /* ink — was #000 */

	/* ─── Buttons ───────────────────────────────────────────────────────── */

	--btn-color:              #0E0E0C;    /* ink text on outlined default — was var(--white) */
	--btn-background:         transparent; /* outlined rectangle — was var(--violet2) */
	--btn-background-hover:   #0E0E0C;    /* hover inverts fill (cream text) — was var(--violet3) */
	--btn-padding:            0 26px;     /* with fixed height — was 12px 30px 8px */
	--btn-font-size:          10px;       /* + 0.22em, UPPERCASE, Averta 700 — was 18px */
	--btn-height:             55px;
	--btn-min-width:          240px;
	--btn-border:             1px;

	/* ─── Forms ─────────────────────────────────────────────────────────── */

	--form-element-background:          transparent;
	--form-element-border-color:        #D9D5CC; /* was var(--violet3) */
	--form-element-focus-border-color:  #0E0E0C; /* was var(--violet) */
	--form-element-height:              49px;
	--placeholder-color:                #6B6860; /* was var(--violet3) */
	--form-font-size:                   16px;    /* was 18px — align to body */
	--form-element-padding:             5px 0;

	/* ─── Breakpoint reference tokens ───────────────────────────────────── */
	/*
	 * Additive — not yet applied in @media rules (those still use literal px).
	 * These document the canonical breakpoints from the audit and exist for the
	 * phase that normalises @media queries.
	 *
	 * NOTE: CSS custom properties cannot be used inside @media query expressions
	 * (they are not environment variables). These tokens serve as documentation
	 * and will be referenced in a PostCSS/JS build step in a future phase.
	 */

	--bp-sm:   767px;   /* mobile max   — @media (max-width: 767px)  */
	--bp-md:  1023px;   /* tablet max   — @media (max-width: 1023px) */
	--bp-lg:  1199px;   /* large max    — @media (max-width: 1199px) */
	--bp-xl:  1399px;   /* wide max     — @media (max-width: 1399px) */

	/* ─── Spacing scale ─────────────────────────────────────────────────── */
	/*
	 * Additive — mirrors the existing 10px-step utility class system
	 * (.pt-1 … .pt-10 etc.) but provides named tokens for future component use.
	 * Generic utilities only — CG's off-grid rhythm values (--section-pad,
	 * --box-pad, etc. above) never round into this scale.
	 */

	--space-1:   10px;
	--space-2:   20px;
	--space-3:   30px;
	--space-4:   40px;
	--space-5:   50px;
	--space-6:   60px;
	--space-7:   70px;
	--space-8:   80px;
	--space-9:   90px;
	--space-10: 100px;
	--space-11: 110px;
	--space-12: 120px;
}

/* ─── Responsive gutter step-down (tablet + mobile) ───────────────────────── */
/*
 * `--pad-x` above is `max(84px, …)`, which floors the band gutter at 84px at
 * EVERY width. On a 390px phone that spent 168px — 43% of the screen — on
 * padding, leaving 222px of content. It was invisible to the gates because the
 * conformance audit only ran at 1440 and 390 against design references whose
 * desktop values it already matched, and because it causes no overflow: the
 * page just quietly squeezes.
 *
 * The design's own home.html renders logo-offset and band-gutter as the SAME
 * value at every width — 72px @1440, 38.4px @768, 24px @390 — i.e. clamp(24px,
 * 5vw, 72px). This rule adopts that curve below the system's existing 1024
 * breakpoint (the dominant one: 35 uses across css/, and every design
 * reference carries a max-width:1024px rule), giving 38.4px @768 and 24px @390
 * — both exact design matches.
 *
 * DESKTOP IS DELIBERATELY UNCHANGED. The design package is not self-consistent
 * here: home.html uses a 72px desktop gutter but our 84px came from media.html,
 * and all 18 shipped 2.0 pages were built and pixel-gated against 84px.
 * Re-pointing desktop at 72px is a separate, deliberate decision — not a
 * side-effect of a mobile fix.
 *
 * The 84px → 51.2px step at the 1024 boundary is intentional: that is where the
 * layout already reflows to the tablet arrangement, so the gutter changes with
 * it rather than mid-band.
 *
 * Mirrors the clamp(24px, 5vw, 84px) form already used by --content-edge.
 */
@media ( max-width: 1024px ) {

	:root {
		--pad-x: clamp( 24px, 5vw, 84px );
	}
}

/*
 * MOBILE BAND RHYTHM (owner decision, 2026-09-04).
 *
 * `--section-pad` was 96px flat at every width — this file had no mobile
 * override for it, and neither did any component. On a phone that is 192px of
 * padding around a ~200px-tall image, which is what the Creative Director's
 * mobile review (#480) and the owner's own iPhone screenshots kept surfacing
 * as "too much white space".
 *
 * Half of 96, chosen by the owner over inventing a new number, so the mobile
 * rhythm stays a recognisable fraction of the desktop one: "half of 96 just to
 * make sure that we're being consistent in terms of pixel padding."
 *
 * BLAST RADIUS: this is EVERY `.cg-band` on EVERY page below 768px, not just
 * the galleries — that is the point of putting it here rather than scoping it
 * to one component, which would make the gallery inconsistent with the bands
 * either side of it.
 *
 * The same-tone junction rule (#503) and its gate read this token rather than
 * a literal 96, so both follow automatically: junctions collapse to one 48px
 * rhythm on mobile, and `scripts/visual-qa/band-junction-check.mjs` asserts
 * against the computed value, so it stays green without edits.
 *
 * Precedent for a token override living in a media query: --pad-x, above.
 */
@media ( max-width: 767px ) {

	:root {
		--section-pad: 48px;
	}
}