/* Hallmark · tokens · project: perluca management (one-page splash)
 * theme: custom — vibe: "black stage, gold monogram, quiet couture"
 * paper-band: dark (L 8%) · display-style: geometric-sans (roman) · accent-hue: chromatic-other (gold-green 105deg)
 * Accent sampled from the FB copy 2.psd monogram gradient.
 */

:root {
	/* ---- colour ---- */
	--color-paper:        oklch(8% 0 0);          /* stage black, matches the photograph's ground */
	--color-paper-2:      oklch(14% 0 0);
	--color-ink:          oklch(100% 0 0);        /* nav + label white */
	--color-ink-muted:    oklch(72% 0 0);         /* the original site's #aaa register */
	--color-accent:       oklch(88% 0.19 105);    /* monogram gold, bright end of the gradient */
	--color-accent-deep:  oklch(58% 0.13 105);    /* monogram gold, lower end */
	--color-focus:        oklch(88% 0.19 105);
	--color-scrim:        oklch(8% 0 0 / 0.68);   /* strong enough for white type over the monogram's bright arc */
	--color-scrim-heavy:  oklch(8% 0 0 / 0.88);   /* narrow-viewport nav band, top stop */
	--color-scrim-mid:    oklch(8% 0 0 / 0.70);   /* narrow-viewport nav band, mid stop */
	--color-scrim-read:   oklch(8% 0 0 / 0.80);   /* reading scrim: the whole panel treatment */
	--color-rule:         oklch(100% 0 0 / 0.16); /* hairline dividers inside the reading field */
	--color-ink-body:     oklch(82% 0 0);         /* running copy — one step brighter than the nav grey */

	/* Language switcher. It sits on the photograph with no scrim of its own, so
	   the control carries its own field: two words are too small to survive
	   whatever the image does behind them. The edge is the accent at low alpha —
	   present enough to read as a control, quiet enough not to rival the nav.
	   Alphas are set for the worst case, not this photograph: a future hero with
	   a light top-right corner still leaves white at ~5.4:1 on the plate and the
	   gold at ~5.0:1 on the lit cell. */
	--color-lang-field:   oklch(8% 0 0 / 0.86);
	--color-lang-field-on: oklch(12% 0 0 / 0.94); /* the lit cell, and hover */
	--color-lang-edge:    oklch(88% 0.19 105 / 0.38);

	/* ---- type ---- */
	--font-display: 'Jost', 'Helvetica Neue', Arial, 'Nimbus Sans L', sans-serif;
	--font-body:    'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;

	/* Four roles, one modular step of ~1.25 between them. Every size on the page
	   comes from this list — no inline clamps, so the scale is the scale.
	     meta  small display type: labels, asides, close, skip link
	     body  running prose
	     lead  each column's opening idea, and the payload of a short column
	     nav   the four destinations; deliberately no larger than lead, so the
	           navigation stops competing with the text it introduces  */
	--text-meta: 0.8125rem;                          /* 13px */
	--text-body: clamp(1rem, 1.05vw, 1.0625rem);     /* 16 → 17px */
	--text-lead: clamp(1.1875rem, 1.4vw, 1.3125rem); /* 19 → 21px */
	--text-nav:  clamp(1rem, 1.55cqw, 1.375rem);     /* 16 → 22px */
	/* One step over meta: the switcher is a control, not an aside, but it must
	   still sit below nav so the four destinations stay the loudest words. */
	--text-lang: 0.9375rem;                          /* 15px */

	/* Three leadings, assigned by line length, not by taste:
	   tight for large type, normal for prose, stack for short stacked lines. */
	--leading-tight: 1.35;
	--leading-body:  1.7;
	--leading-stack: 1.5;

	--tracking-wide:  0.06em;
	--tracking-wider: 0.14em;

	/* ---- space (4pt) ---- */
	--space-2xs: 0.25rem;
	--space-xs:  0.5rem;
	--space-sm:  0.75rem;
	--space-md:  1rem;
	--space-lg:  1.5rem;
	--space-xl:  2.5rem;

	/* ---- line ---- */
	--rule-hair: 1px;

	/* ---- plate ---- */
	--blur-plate: 6px;                 /* the only blur on the page */
	--tap-min:    2.75rem;             /* 44px — the floor for a finger */
	--tap-min-aa: 1.5rem;              /* 24px — WCAG 2.2 AA 2.5.8 floor */

	/* ---- radius ---- */
	--radius-none: 0;

	/* ---- motion ---- */
	--dur-fast: 120ms;
	--dur-base: 200ms;
	--ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in:     cubic-bezier(0.55, 0, 1, 0.45);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}