/* =====================================================================
 * The Valére Group — brand tokens.
 * Source of truth: Valere-Brand-Guidelines.md (canonical, 2026-07-30),
 * itself derived from "Valere - Brand Guide V2" + platform PRD §6-§7.
 * Replaces the 2026-08-12 placeholder set (warm paper / evergreen / bronze),
 * which predated the brand guide.
 *
 * Two brand rules govern this file:
 *   1. Mint #00E297 is the SIGNAL color. Its power comes from scarcity.
 *      It is never the default link or body color.
 *   2. True black #000000 is never used. Dark Slate #3D3D3D replaces it.
 *      Body text carves out to #1A1A1A for readability.
 *
 * Contrast note: mint on white measures 1.7:1 and cannot legally carry text
 * on light ground. vgs-base spends --color-brand-primary on link text, nav
 * hover, eyebrows and card icons as well as on button fills, so primary maps
 * to Dark Slate (11.0:1 on white) and mint maps to accent, which base only
 * spends on inverse surfaces (11.6:1 on #0A0A0A). Both hold WCAG 2.2 AA.
 * Override-only file: do not write component CSS here.
 * ===================================================================== */

:root {
	/* --- Surfaces. Dark-first immersion, light for content clarity. --- */
	--color-bg-page: #FFFFFF;            /* white — a key brand color */
	--color-bg-surface: #FFFFFF;         /* cards sit flush on white */
	--color-bg-subtle: #F8F8F8;          /* surface-light — band alternation */
	--color-bg-inverse: #0A0A0A;         /* surface-dark — heroes, dividers */

	/* --- Brand. Primary carries text and fills; accent is the signal. --- */
	--color-brand-primary: #3D3D3D;      /* Dark Slate — replaces black */
	--color-brand-primary-hover: #2A2A2A;/* deeper slate, still not true black */
	--color-brand-accent: #00E297;       /* Mint — CTAs, active states, eyebrows on dark */

	/* --- Text --- */
	--color-text-primary: #1A1A1A;       /* body-text carve-out, 16.1:1 on white */
	--color-text-secondary: #5A5A5A;     /* 6.9:1 on white */
	--color-text-inverse: #FFFFFF;
	--color-text-inverse-secondary: #ADB5B1; /* 8.8:1 on #0A0A0A */

	/* --- Borders --- */
	--color-border-default: #E5E5E5;
	--color-border-strong: #CFCFCF;

	/* --- Type. Futura Medium is the brand face; Jost is the sanctioned
	   web substitute (same geometric skeleton). Inter carries body copy:
	   Futura is a display face and must not set long-form text. --- */
	--font-display: "Jost", "Century Gothic", "AppleGothic", "Trebuchet MS", sans-serif;
	--font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* --- Accent face. Used ONLY for the emphasised phrase inside a heading,
	   never for a whole heading and never for body copy.

	   Very Vogue (Nicky Laatz), self-hosted from assets/fonts. Single family,
	   no fallbacks, by explicit direction: the emphasis treatment is either
	   the real face or it is not the treatment.

	   CONSEQUENCE, deliberate: with no fallback and no generic family, any
	   browser that cannot load the WOFF2 renders emphasis in its own default
	   font rather than a chosen one. Until the licensed files are present in
	   assets/fonts, that is what ships. Uploading the files is what completes
	   this, not a CSS change. --- */
	--font-accent: "Very Vogue Text";
}

/* ---------------------------------------------------------------------
 * Brand extensions beyond the vgs-base token contract. Available to
 * section CSS; base itself does not read these.
 * ------------------------------------------------------------------- */
:root {
	--color-mint: #00E297;
	--color-sea-blue: #00E5D4;           /* secondary — only ever inside the gradient */
	--color-dark-slate: #3D3D3D;
	--color-surface-mid: #111111;
	--color-border-mint: rgba(0, 226, 151, 0.15);

	/* The Mint -> Sea Blue gradient is the brand's signature treatment.
	   If a gradient cannot be reproduced, use Mint alone. Never Sea Blue alone.
	   These bright stops are for DARK grounds only. */
	--gradient-primary: linear-gradient(135deg, #00E297, #00E5D4);
	--gradient-radial: radial-gradient(circle, #00E297, #00E5D4);
	--gradient-subtle: linear-gradient(135deg, rgba(0, 226, 151, 0.1), rgba(0, 229, 212, 0.1));

	/* Same gesture, darkened for LIGHT grounds. The bright gradient measures
	   1.5:1 on white, so it can never carry text, numerals, or a meaningful
	   mark there. These stops clear AA on both #FFFFFF and the #F8F8F8 band
	   (>= 5.0:1). Use for index numerals, eyebrow rules and bullets on light
	   sections; keep --gradient-primary for dark sections and for large
	   decorative fields where nothing must be read. */
	--gradient-primary-on-light: linear-gradient(135deg, #007A50, #00786E);
}

/* Mint-filled CTA needs dark text, not white: mint/white is 1.7:1 while
   mint/#1A1A1A is 11.7:1.
 *
 * The class is doubled deliberately. vgs-base ships
 * `.vgs-ground-inverse :is(h1,h2,h3,h4,h5,h6,p,a) { color: inherit }`, and
 * :is() carries the specificity of its most specific argument, so that rule
 * computes to (0,1,1). A single `.vgs-btn--accent` at (0,1,0) loses to it and
 * the button silently inherits white, landing at 1.7:1. Doubling to (0,2,0)
 * wins on every ground rather than only on inverse. */
.vgs-btn.vgs-btn--accent {
	background: var(--color-brand-accent);
	color: #1A1A1A;
	border-color: var(--color-brand-accent);
}

.vgs-btn.vgs-btn--accent:hover,
.vgs-btn.vgs-btn--accent:focus-visible {
	background: #00C985;
	border-color: #00C985;
	color: #1A1A1A;
}

/* Eyebrows on light ground stay Dark Slate; base already switches them to
   accent on inverse surfaces, which is where the guide wants mint eyebrows. */

/* ---------------------------------------------------------------------
 * Emphasis. One phrase per heading, carrying BOTH a face change and a
 * colour change. Scarcity is the point: two emphases in one heading reads
 * as decoration, not emphasis.
 *
 * The Didone sits on a smaller x-height than Jost, so it is scaled to 1.18em
 * to match optically rather than numerically. Italic is intrinsic to the
 * treatment, not a separate modifier.
 *
 * Gradient text needs a real colour underneath it: background-clip is
 * unsupported in some engines and in forced-colors mode, and without the
 * fallback the phrase renders invisible.
 * ------------------------------------------------------------------- */
.vgs-emph {
	font-family: var(--font-accent);
	font-style: normal;      /* roman body; the initial carries the italic */
	font-size: 1.18em;
	line-height: 0.9;          /* keep the taller glyphs from opening the leading */
	color: var(--color-brand-primary);   /* fallback before any clipping applies */
}

/* On dark bands the bright gradient clears contrast comfortably.
 *
 * The hero is listed explicitly. vgs_render_section_heromedia() emits no ground
 * class, so the emphasis was falling through to the LIGHT-ground default and
 * rendering in the deep #007A50 ramp over a dark photograph: legible, but a
 * different green from the mint CTA sitting right beneath it. */
.vgs-ground-inverse .vgs-emph,
.vgs-heromedia .vgs-emph {
	background: var(--gradient-primary);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* On light bands the bright mint measures 1.7:1 and cannot carry text, so
   the deeper end of the ramp is the DEFAULT. Inverse grounds opt up to the
   bright gradient above; nothing has to remember a modifier class.
   This stays a bare .vgs-emph even though it sits AFTER the rule above: that
   one is a descendant selector at (0,2,0) and this is (0,1,0), so specificity
   decides it, not order. A :not() dodge here would have needed a descendant
   combinator and silently matched nothing. */
.vgs-emph,
.vgs-emph--on-light {
	background: linear-gradient(135deg, #007A50, #00786E);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.vgs-emph,
	.vgs-ground-inverse .vgs-emph,
	.vgs-emph--on-light { background: none; color: var(--color-brand-accent); }
}

@media (forced-colors: active) {
	.vgs-emph,
	.vgs-ground-inverse .vgs-emph,
	.vgs-emph--on-light { background: none; color: CanvasText; forced-color-adjust: none; }
}


/* ---------------------------------------------------------------------
 * Headline face: Inter at the display end of its optical-size axis.
 *
 * Inter Display is not a separate family. It is Inter with `opsz` pushed to
 * the top of its 14..32 range, which tightens spacing and refines the
 * letterforms for large sizes. We already request that axis, so this costs no
 * additional font download.
 *
 * font-optical-sizing:auto would resolve opsz from the rendered px size, but
 * browsers cap what they infer; setting the axis explicitly guarantees the
 * display cut at every heading size.
 *
 * Emphasis stays Very Vogue italic plus the highlight colour, so the contrast
 * is face + slope + colour against a neutral grotesque.
 * ------------------------------------------------------------------- */
.vgs-display,
.vgs-display--section,
.vgs-hero__headline,
h1.vgs-display,
.vgs-argument .vgs-display--section {
	font-family: var(--font-body);
	font-variation-settings: "opsz" 32;
	font-optical-sizing: auto;
	font-weight: 600;
	letter-spacing: -0.032em;   /* grotesques need more negative tracking than a Didone */
	line-height: 1.03;
}

/* Emphasis: the one place the editorial face appears. Reset the variation
   axis, since opsz belongs to Inter and would otherwise be inherited onto a
   family that has no such axis. */
.vgs-emph {
	font-family: var(--font-accent);
	font-variation-settings: normal;
	font-style: normal;
	font-weight: 400;
	font-size: 1.04em;          /* Vogue's x-height sits below Inter's */
	letter-spacing: -0.01em;
	line-height: inherit;
}

/* Geometric voice stays on the small structural type. */
.vgs-eyebrow,
.vgs-track__index,
.vgs-argument__label {
	font-family: var(--font-display);
}


/* ---------------------------------------------------------------------
 * Split emphasis: italic initial, roman remainder.
 *
 * The phrase is no longer set wholly in italic. Each word's first LETTER is
 * wrapped by the render layer and italicised on its own, which is what makes
 * the treatment read as lettering rather than as a run of italic text. There
 * is no CSS selector for this, hence the markup.
 *
 * Very Vogue's italic sits optically smaller and lighter than its roman at the
 * same size, so the initial is nudged up fractionally to hold the cap line.
 * ------------------------------------------------------------------- */
.vgs-emph__i {
	font-style: italic;
	font-size: 1.06em;
	line-height: 0;          /* keep the taller italic off the leading */
	padding-right: 0.012em;  /* italic slant would otherwise crowd the next glyph */
}

/* ---------------------------------------------------------------------
 * Emphasis is an H1-ONLY treatment.
 *
 * Applied to every section headline it stops being emphasis and becomes the
 * house style: nine instances on one page reads as decoration, and the H1
 * loses the distinction it is supposed to own.
 *
 * Scoped here rather than by stripping the spans from page data, so the rule
 * holds for every page built from here regardless of what its JSON contains.
 * The markup stays in H2s and simply renders neutral, which also means this is
 * one line to reverse.
 *
 * Everything is reset explicitly, including the gradient clip. Leaving
 * `color: transparent` behind without its background would render the phrase
 * invisible rather than merely un-emphasised.
 * ------------------------------------------------------------------- */
:where(h2, h3, h4, h5, h6) .vgs-emph__i,
.vgs-ground-inverse :where(h2, h3, h4, h5, h6) .vgs-emph__i {
	font-style: inherit;
	font-size: inherit;
	line-height: inherit;
	padding-right: 0;
}

:where(h2, h3, h4, h5, h6) .vgs-emph,
.vgs-ground-inverse :where(h2, h3, h4, h5, h6) .vgs-emph {
	font-family: inherit;
	font-style: inherit;
	font-weight: inherit;
	font-size: inherit;
	font-variation-settings: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	color: inherit;
}