/*
 * AX LAW design tokens — single source of truth.
 * Documented in docs/DESIGN-SYSTEM.md. Brand colours are VERIFIED from the
 * live site (--primary/--secondary/--third-color); others are derived tints.
 */

:root {
	/* ---- Colour: brand (verified) ---- */
	--ax-navy: #002e4a;
	--ax-teal: #006076;
	--ax-gold: #b19c72;

	/* ---- Colour: derived ---- */
	--ax-navy-deep: #001d2f;   /* large dark surfaces, overlay */
	--ax-gold-soft: #d8cbae;   /* gold text on navy at small sizes */
	--ax-stone: #f8f6f2;       /* warm alternate surface (used on live About page) */
	--ax-white: #ffffff;
	--ax-ink: #0e1b24;         /* body text on light */
	--ax-slate: #4a5a66;       /* secondary text on light (7.1:1 on white) */
	--ax-line: rgb(0 46 74 / 0.14);
	--ax-line-strong: rgb(0 46 74 / 0.32);
	--ax-line-light: rgb(255 255 255 / 0.18);
	/* Heading text-fill base (pale) colours. Transitional state only: the final
	   state is the full heading colour (navy 14:1 / white 14:1), and reduced-motion
	   or no-JS visitors only ever see the final state. */
	--ax-fill-base: #a9c2c4;       /* pale mint-grey, 1.9:1 on white → fills to navy */
	--ax-fill-base-dark: #46677d;  /* subdued steel, 2.4:1 on navy → fills to white */
	--ax-scrim: linear-gradient(180deg, rgb(0 29 47 / 0.55) 0%, rgb(0 29 47 / 0.15) 45%, rgb(0 29 47 / 0.7) 100%);

	/* ---- Semantic colour (light surface default) ---- */
	--ax-bg: var(--ax-white);
	--ax-fg: var(--ax-ink);
	--ax-fg-muted: var(--ax-slate);
	--ax-heading: var(--ax-navy);
	--ax-accent: var(--ax-teal);
	--ax-rule: var(--ax-line);
	--ax-focus: var(--ax-teal);

	/* ---- Typography ---- */
	--ax-font-serif: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif;
	--ax-font-sans: "Poppins", "Poppins Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

	/* Fluid scale: 375px → 1600px viewport. */
	--ax-step-display: clamp(3.25rem, 1.66rem + 6.78vw, 9.5rem);
	--ax-step-display-m: clamp(2.5rem, 1.6rem + 3.84vw, 6rem);
	--ax-step-h1: clamp(2.25rem, 1.7rem + 2.35vw, 4.5rem);
	--ax-step-h2: clamp(2rem, 1.55rem + 1.92vw, 3.75rem);
	--ax-step-h3: clamp(1.625rem, 1.4rem + 0.96vw, 2.5rem);
	--ax-step-h4: clamp(1.25rem, 1.15rem + 0.41vw, 1.625rem);
	--ax-step-h5: clamp(1.0625rem, 1.03rem + 0.15vw, 1.1875rem);
	--ax-step-lead: clamp(1.25rem, 1.1rem + 0.61vw, 1.75rem);
	--ax-step-body-l: clamp(1.0625rem, 1.02rem + 0.2vw, 1.25rem);
	--ax-step-body: clamp(1rem, 0.98rem + 0.1vw, 1.0625rem);
	--ax-step-small: 0.875rem;
	--ax-step-eyebrow: 0.75rem;

	--ax-leading-display: 0.98;
	--ax-leading-heading: 1.08;
	--ax-leading-tight: 1.25;
	--ax-leading-body: 1.7;

	--ax-tracking-display: -0.025em;
	--ax-tracking-heading: -0.015em;
	--ax-tracking-eyebrow: 0.16em;

	/* ---- Space (fluid) ---- */
	--ax-space-3xs: 0.25rem;
	--ax-space-2xs: 0.5rem;
	--ax-space-xs: 0.75rem;
	--ax-space-s: 1rem;
	--ax-space-m: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
	--ax-space-l: clamp(1.75rem, 1.4rem + 1.4vw, 3rem);
	--ax-space-xl: clamp(2.5rem, 1.9rem + 2.6vw, 4.75rem);
	--ax-space-2xl: clamp(3.5rem, 2.4rem + 4.5vw, 7.5rem);
	--ax-section: clamp(4.5rem, 2.9rem + 6.8vw, 10.5rem);

	/* ---- Layout ---- */
	--ax-container-max: 100rem;           /* 1600px */
	--ax-gutter: clamp(1.25rem, 0.6rem + 2.8vw, 4rem);
	--ax-columns: 12;
	--ax-column-gap: clamp(1rem, 0.6rem + 1.6vw, 2.5rem);
	--ax-measure: 68ch;
	--ax-measure-wide: 60rem;             /* 960px */
	--ax-header-h: 4.25rem;

	/* ---- Shape ---- */
	--ax-radius: 0;                       /* square, editorial */
	--ax-radius-pill: 999px;
	--ax-border: 1px solid var(--ax-rule);

	/* The AX monogram diagonal: horizontal run per unit of height (≈55°). */
	--ax-diagonal: 0.705;

	/* ---- Motion ---- */
	--ax-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ax-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--ax-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--ax-dur-fast: 180ms;
	--ax-dur-base: 320ms;
	--ax-dur-slow: 700ms;
	--ax-dur-image: 1200ms;

	/* ---- Layers ---- */
	--ax-z-header: 100;
	--ax-z-overlay: 90;
	--ax-z-preview: 50;
	--ax-z-skip: 200;
}

@media (min-width: 64rem) {
	:root {
		--ax-header-h: 5.5rem;
	}
}

/* Surface modifiers swap semantic tokens; components only read semantics. */
.ax-surface--stone {
	--ax-bg: var(--ax-stone);
	background: var(--ax-bg);
}

.ax-surface--navy,
.ax-surface--deep {
	--ax-bg: var(--ax-navy);
	--ax-fg: rgb(255 255 255 / 0.86);
	--ax-fg-muted: rgb(255 255 255 / 0.66);
	--ax-heading: var(--ax-white);
	--ax-accent: var(--ax-gold);
	--ax-rule: var(--ax-line-light);
	--ax-focus: var(--ax-gold);
	background: var(--ax-bg);
	color: var(--ax-fg);
}

.ax-surface--deep {
	--ax-bg: var(--ax-navy-deep);
}