/* =========================================================
   ALSTON COACHES — DESIGN TOKENS
   Single source of truth for colour, type, layout and motion.

   RULES
   1. Surfaces are black or white only. No tinted backgrounds.
   2. Gold is an accent, never a surface. Treat it as jewellery.
   3. Never write a raw hex value in a page stylesheet. Add a
      token here instead, or use an existing one.
   4. There is exactly one gold. Never introduce a second.
========================================================= */

:root {

	/* ---------------------------------------------------------
	   SURFACES — black and white only
	--------------------------------------------------------- */
	--paper:            #FFFFFF;   /* primary light surface           */
	--paper-2:          #FAFAFA;   /* the only off-white. neutral.    */
	--ink:              #0E0E0E;   /* primary dark surface            */
	--ink-2:            #171717;   /* raised dark surface, cards      */
	--ink-3:            #242424;   /* dark surface hover / dividers   */
	--black:            #000000;   /* true black. hero overlays.      */

	/* ---------------------------------------------------------
	   TEXT
	--------------------------------------------------------- */
	--text:             #0E0E0E;
	--text-mute:        #5A5A5A;
	--text-faint:       #8A8A8A;

	--text-inv:         #FFFFFF;
	--text-inv-mute:    rgba(255, 255, 255, .66);
	--text-inv-faint:   rgba(255, 255, 255, .44);

	/* ---------------------------------------------------------
	   GOLD — one gold, used as an accent only, never a surface.
	   Contrast on white is 2.3:1, so gold text on a white
	   background is a deliberate brand choice rather than an
	   accessible one. Keep body copy in --text; reserve gold
	   for highlighted words, eyebrows, rules and active states.
	--------------------------------------------------------- */
	--gold:             #C9A961;
	--gold-light:       #DCC08A;   /* hover state on dark */
	--gold-deep:        var(--gold); /* legacy alias — do not use */

	/* ---------------------------------------------------------
	   LINES
	--------------------------------------------------------- */
	--line:             rgba(14, 14, 14, .10);
	--line-strong:      rgba(14, 14, 14, .18);
	--line-solid:       #E6E6E6;
	--line-inv:         rgba(255, 255, 255, .14);
	--line-inv-strong:  rgba(255, 255, 255, .24);

	/* ---------------------------------------------------------
	   FORM STATES — the only non-monochrome colours in the system
	--------------------------------------------------------- */
	--error:            #B00020;
	--error-soft:       #FFB3B3;
	--success-soft:     #F0FBF7;

	/* ---------------------------------------------------------
	   OVERLAYS — for text legibility over imagery
	--------------------------------------------------------- */
	--scrim:            rgba(0, 0, 0, .55);
	--scrim-soft:       rgba(0, 0, 0, .35);
	--scrim-strong:     rgba(0, 0, 0, .72);

	/* ---------------------------------------------------------
	   TYPE
	--------------------------------------------------------- */
	/* Two families only. To change the display face site-wide,
	   edit this one line and update the Google Fonts URL in
	   functions.php. Nothing else needs touching. */
	--font-display:     'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--font-body:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-nav:         var(--font-display);

	--tracking-eyebrow: .18em;
	--tracking-nav:     .08em;
	--tracking-display: -.01em;

	/* ---------------------------------------------------------
	   TYPE SCALE
	   Every font-size on the site resolves to one of these.
	   Never write a raw px size in a page stylesheet.
	--------------------------------------------------------- */
	--fs-display-1: clamp(44px, 5.6vw, 76px);   /* page + hero H1        */
	--fs-display-2: clamp(34px, 4.2vw, 56px);   /* section H2            */
	--fs-display-3: clamp(26px, 3vw, 38px);     /* sub-section H3        */
	--fs-h4:        clamp(20px, 2vw, 26px);
	--fs-h5:        18px;
	--fs-lead:      clamp(16px, 1.2vw, 18px);   /* intro paragraphs      */
	--fs-body:      16px;
	--fs-body-sm:   15px;
	--fs-ui:        13px;                        /* nav, buttons, links   */
	--fs-label:     12px;                        /* eyebrows, meta        */
	--fs-micro:     11px;

	/* ---------------------------------------------------------
	   WEIGHTS
	   Nothing above 500. Bold has no place in this design system:
	   Jost and Inter both carry authority at light weights, and
	   semibold on 11px uppercase text is unreadable.
	--------------------------------------------------------- */
	--fw-light:     200;   /* large display only    */
	--fw-book:      300;   /* headings, body copy   */
	--fw-regular:   400;   /* UI labels, eyebrows   */
	--fw-medium:    500;   /* nav, emphasis         */

	/* ---------------------------------------------------------
	   LAYOUT
	--------------------------------------------------------- */
	--max:              1480px;
	--gutter:           clamp(24px, 5vw, 64px);
	--section-y:        clamp(72px, 9vw, 140px);

	/* ---------------------------------------------------------
	   MOTION
	--------------------------------------------------------- */
	--ease:             cubic-bezier(.22, .61, .36, 1);
	--ease-out:         cubic-bezier(.16, 1, .3, 1);
	--dur:              .45s;
	--dur-fast:         .22s;
}

/* =========================================================
   LEGACY ALIASES
   Older stylesheets reference these names. Kept as pointers
   so nothing breaks mid-migration. Do not use in new code —
   they will be removed once every page has been reworked.
========================================================= */

:root {
	--alston-cream:        var(--paper);
	--alston-ink:          var(--ink);
	--alston-ink-soft:     var(--text-mute);
	--alston-gold:         var(--gold);
	--alston-gold-bright:  var(--gold-light);
	--alston-font-geo:     var(--font-display);
	--alston-font-nav:     var(--font-display);
	--alston-font-body:    var(--font-body);
}

/* =========================================================
   HEADING FONT ENFORCEMENT
   Every heading on the site is Jost. Only body copy is Inter.
   Anything nested inside a heading — highlight spans, links,
   strong — inherits, so a heading can never switch typeface
   part-way through.
========================================================= */

h1, h2, h3, h4, h5, h6,
[class*="__title"],
[class*="__heading"],
[class$="-title"],
[class$="-heading"] {
	font-family: var(--font-display);
}

h1 *, h2 *, h3 *, h4 *, h5 *, h6 *,
[class*="__title"] *,
[class*="__heading"] *,
[class$="-title"] *,
[class$="-heading"] * {
	font-family: inherit;
}

/* =========================================================
   GOLD HIGHLIGHT
   Replaces the <em> tags previously used as a colour hook.
   <em> means emphasis, not "make this gold" — and the design
   system uses no italics anywhere.
========================================================= */

.hl {
	font-family: inherit;
	font-style: normal;
	font-weight: inherit;
	font-size: inherit;
	color: var(--gold);
}

em,
i {
	font-style: normal;
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}