/* ==========================================================================
   tokens.css — the design's single source of numeric truth
   --------------------------------------------------------------------------
   Every value here was read out of the source template's stylesheet
   (`_source/assets/css/master.css`, 298 KB / 2292 rules) with
   `python tools/css-specs.py`. Where a number differs from the template, the
   comment says why — "1:1" means the *look* is identical, not that a known bug
   is reproduced.

   Load order: tokens → base → components → motion.
   ========================================================================== */

:root {
	/* ---- Ink and surfaces -------------------------------------------------
	   The template's text colour is #121518 everywhere. Kept exactly: it is
	   what makes the screenshots line up, and it is 15.9:1 on white. */
	--ink: #121518;
	--ink-2: #3A4048;          /* secondary copy — #121518 at 75% reads the same */
	--ink-3: #6B7280;          /* meta, dates, captions */
	--surface: #FFFFFF;
	--surface-2: #F4F4F6;       /* .bg-gray-lighter in the template */
	--surface-3: #EEF2F6;       /* .bg-gray — the hero card + label pills */
	--surface-dark: #0E1114;    /* footer */
	--line: #E4E8EC;            /* .button's default border, and hairlines */
	--line-strong: #D2D8DF;

	/* ---- Brand ------------------------------------------------------------
	   Colours are sampled from the company logo sheet (tools/make-brand-assets.py
	   records the extraction): the mark is a deep-to-bright blue dragon with a
	   single amber accent.

	   This is a deliberate departure from the template, which ships no brand
	   colour and instead leans on a purple→red→amber gradient. Keeping that
	   gradient would have meant the site's most prominent colour had nothing to
	   do with the logo sitting directly above it. The gradient's *structure*
	   (a three-stop sweep used as the signature accent on buttons, headings and
	   the marquee) is preserved exactly; only its stops change. */
	--brand: #0060C0;          /* the mark's dominant blue */
	--brand-ink: #003078;      /* deepest part of the dragon body */
	--brand-soft: #E8F1FB;
	--accent: #E6961E;         /* the pixel-topped "i" */
	--accent-soft: #FDF3E3;

	/* The template's --gradient-1 structure, re-stopped to the brand:
	   deep blue → bright blue → amber. */
	--grad: linear-gradient(90deg, #003078 0%, #0060C0 55%, #E6961E 100%);
	/* De-saturated twin, for large filled areas where the full-strength
	   gradient vibrates against white text (the stats band, the CTA card). */
	--grad-soft: linear-gradient(90deg, #35578C 0%, #3D7FBF 55%, #C69553 100%);

	/* ---- Overlays ---------------------------------------------------------
	   .bg-dark-03 / -05 / -06 in the template. These sit on top of the
	   parallax photographs, so the exact alpha decides whether the white
	   headline underneath stays legible. */
	--veil-3: rgba(18, 21, 24, 0.30);
	--veil-5: rgba(18, 21, 24, 0.50);
	--veil-6: rgba(18, 21, 24, 0.60);

	/* ---- Type -------------------------------------------------------------
	   Montserrat + Philosopher are self-hosted (assets/fonts/fonts.css) and
	   subset to latin/latin-ext, so they only ever render Latin glyphs. The
	   Chinese fallback therefore has to be a deliberate stack, not a wish:
	   PingFang (macOS/iOS), Microsoft YaHei (Windows), Noto Sans CJK (Linux),
	   Source Han (fallback). Without an explicit CJK stack the browser picks
	   something ugly on Android. */
	--font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto,
		"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC",
		"Source Han Sans SC", sans-serif;
	--font-serif: "Philosopher", "Songti SC", "SimSun", Georgia, serif;
	--font-mono: "Cascadia Code", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Fluid display scale. The template sets h1 in raw px (up to ~72px) and
	   lets it overflow on phones; clamp() gives the same desktop size without
	   the overflow. Ratios are the template's. */
	--fs-display: clamp(2.4rem, 7vw, 4.5rem);
	--fs-h1: clamp(2rem, 4.6vw, 3.5rem);
	--fs-h2: clamp(1.6rem, 3.2vw, 2.6rem);
	--fs-h3: clamp(1.3rem, 2.2vw, 1.85rem);
	--fs-h4: clamp(1.1rem, 1.6vw, 1.35rem);
	--fs-h5: 1.0625rem;
	--fs-h6: 0.8125rem;          /* the template's uppercase eyebrow labels */
	--fs-body: 1rem;
	--fs-sm: 0.9375rem;
	--fs-xs: 0.8125rem;

	--lh-tight: 1.12;
	--lh-snug: 1.35;
	--lh-body: 1.75;             /* template body copy is loose */

	/* ---- Spacing ----------------------------------------------------------
	   The template's section rhythm, exactly. These are the numbers that make
	   the pages breathe the same way. */
	--s-xs: 50px;
	--s: 70px;
	--s-md: 100px;
	--s-lg: 140px;
	--s-xl: 180px;
	--s-2xl: 220px;

	--gutter: 30px;               /* .container padding in the template */
	--gap: 1.5rem;               /* Bootstrap g-4 */

	/* ---- Shape ------------------------------------------------------------
	   The template rounds card images at 0.5em and pills buttons at 50px.
	   Both are kept: unlike the Swiss project next door, rounding is part of
	   *this* design's identity, not an AI tell. */
	--r-sm: 6px;
	--r: 0.5em;
	--r-lg: 1em;
	--r-pill: 50px;

	/* ---- Depth ------------------------------------------------------------
	   Two shadows only. The template uses a single soft one for cards
	   (0 10px 40px -4px rgba(22,25,28,.17)) and nothing else. */
	--shadow-card: 0 10px 40px -4px rgba(22, 25, 28, 0.17);
	--shadow-float: 0 18px 50px -12px rgba(22, 25, 28, 0.22);

	/* ---- Motion -----------------------------------------------------------
	   Durations lifted from the template's transitions so the feel matches:
	   0.12s for colour/opacity, 0.16s for lifts, 0.4s for image scale with the
	   same cubic-bezier. */
	--t-fast: 0.12s;
	--t: 0.16s;
	--t-slow: 0.4s;
	--ease-out: ease-out;
	--ease-scale: cubic-bezier(0.165, 0.84, 0.44, 1);

	/* ---- Layout ----------------------------------------------------------- */
	--wrap: 1200px;
	--wrap-wide: 1320px;
	--header-h: 80px;
}

/* Section rhythm under 992px — the template steps 140 → 110 → 90 and 220 → 140
   → 120. Same steps here, so breakpoint screenshots agree. */
@media (max-width: 991px) {
	:root {
		--s-lg: 110px;
		--s-xl: 140px;
		--s-2xl: 140px;
	}
}

@media (max-width: 767px) {
	:root {
		--s-lg: 90px;
		--s-xl: 110px;
		--s-2xl: 120px;
		--s-md: 70px;
		--gutter: 20px;
		--header-h: 68px;
	}
}

/* Respect the OS-level contrast preference where the platform exposes it.
   Opt-in only; the default palette already passes AA everywhere. */
@media (prefers-contrast: more) {
	:root {
		--ink-3: #4B5563;
		--line: #B9C1CB;
	}
}