/**
 * Design tokens.
 *
 * Everything visual resolves to a variable here. The client has stated only three
 * brand colours and says the branding itself is still tentative — so the whole system
 * is token-driven and a rebrand is a change to this file, not a rebuild.
 *
 * Client-specified values are marked. Everything else is inferred from the mockups
 * and needs sign-off.
 */

:root {
	/* ── Brand — CLIENT SPECIFIED (deck pages 5, 6, 8–14) ───────────────── */
	/* Client stated #05507E, but the deck actually renders #034D88 across large flat
	   areas of the header and footer. The reference image is the source of truth for
	   visual match, so the darker value is used and the stated one kept below. */
	--aik-ribbon: #034d88;
	--aik-ribbon-stated: #05507e;
	--aik-gold: #c8a24a; /* logo, session meter, gated CTAs */
	--aik-sky: #2563eb; /* active states, links, icons */

	/* ── Brand tints/shades, derived ────────────────────────────────────── */
	--aik-ribbon-dark: #04405f;
	--aik-ribbon-light: #0a6ba6;
	--aik-ribbon-soft: #e8f1f7;
	--aik-avatar-bg: #021f47; /* sampled from the "JD" disc, deck p2 */
	--aik-gold-dark: #a8833a;
	--aik-gold-soft: #faf3e3;
	--aik-sky-dark: #1d4ed8;
	--aik-sky-soft: #eff4ff;

	/* ── Neutrals — inferred from mockups, needs sign-off ───────────────── */
	--aik-navy-900: #0b2e4f; /* display headings */
	--aik-text: #334155; /* body copy */
	--aik-muted: #64748b; /* secondary text, placeholders */
	--aik-faint: #94a3b8;
	--aik-border: #e2e8f0;
	--aik-border-strong: #cbd5e1;
	--aik-surface: #ffffff; /* cards, table body */
	--aik-surface-alt: #f8fafc; /* page background */
	--aik-surface-sunken: #f1f5f9;

	/* ── Status ──────────────────────────────────────────────────────────── */
	--aik-success: #15803d; /* "Create Free Account" button, deck p1 */
	--aik-warning: #b45309;
	--aik-danger: #b91c1c;

	/* ── Badge palette — datasets map values onto these per-dataset ──────── */
	--badge-teal-bg: #ccfbf1;
	--badge-teal-fg: #0f766e;
	--badge-blue-bg: #dbeafe;
	--badge-blue-fg: #1d4ed8;
	--badge-amber-bg: #fef3c7;
	--badge-amber-fg: #b45309;
	--badge-pink-bg: #fce7f3;
	--badge-pink-fg: #be185d;
	--badge-purple-bg: #ede9fe;
	--badge-purple-fg: #6d28d9;
	--badge-neutral-bg: #f1f5f9;
	--badge-neutral-fg: #475569;

	/* ── Typography ──────────────────────────────────────────────────────── */
	/* Typeface is NOT specified in the deck. Mockups show a geometric humanist
	   sans; Inter is the closest free match and is self-hosted (no external CDN,
	   which also suits the content-protection requirement). */
	--aik-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	--aik-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	--fs-xs: 0.75rem; /* 12 */
	--fs-sm: 0.875rem; /* 14 */
	--fs-base: 1rem; /* 16 */
	--fs-lg: 1.125rem; /* 18 */
	--fs-xl: 1.25rem; /* 20 */
	--fs-2xl: 1.5rem; /* 24 */
	--fs-3xl: 1.875rem; /* 30 */
	--fs-4xl: 2.25rem; /* 36 */
	--fs-5xl: 3rem; /* 48 */
	--fs-6xl: 3.75rem; /* 60 — deck p1 H1 */

	--lh-tight: 1.15;
	--lh-snug: 1.35;
	--lh-normal: 1.6;
	--lh-relaxed: 1.75; /* long-form article body */

	--fw-normal: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* ── Spacing — 4px base ──────────────────────────────────────────────── */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.25rem;
	--sp-6: 1.5rem;
	--sp-8: 2rem;
	--sp-10: 2.5rem;
	--sp-12: 3rem;
	--sp-16: 4rem;
	--sp-20: 5rem;
	--sp-24: 6rem;

	/* ── Radius ──────────────────────────────────────────────────────────── */
	--r-sm: 4px;
	--r-md: 6px;
	--r-lg: 8px;
	--r-xl: 12px;
	--r-2xl: 16px;
	--r-full: 9999px;

	/* ── Elevation ───────────────────────────────────────────────────────── */
	--sh-card: 0 1px 2px rgb(15 23 42 / 0.04), 0 1px 3px rgb(15 23 42 / 0.06);
	--sh-raised: 0 4px 6px -1px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.06);
	--sh-dropdown: 0 10px 15px -3px rgb(15 23 42 / 0.1), 0 4px 6px -4px rgb(15 23 42 / 0.08);
	--sh-modal: 0 25px 50px -12px rgb(15 23 42 / 0.25);

	/* ── Layout ──────────────────────────────────────────────────────────── */
	/* Measured off deck p1 (1450px canvas, page height 1037px):
	     header content  x  65..1379 = 1315px  = 90.7% of viewport
	     body content    x 133..1317 = 1185px  = 81.7% of viewport
	   The header is deliberately wider than the body. Expressed as vw with a cap so
	   the deck's proportions hold at 1450 and stop growing on very wide screens —
	   a fixed max-width looked far narrower than the design at 1920. */
	--aik-container: min(1500px, 82vw);
	--aik-container-wide: min(1660px, 91vw);
	--aik-gutter: 0px;
	--aik-header-h: 90px;
	--aik-rail-w: 280px; /* sector rail, deck p5 */
	--aik-aside-w: 260px; /* "In this section" rail */

	/* ── Motion ──────────────────────────────────────────────────────────── */
	--t-fast: 120ms ease;
	--t-base: 180ms ease;
	--t-slow: 280ms ease;

	--z-dropdown: 100;
	--z-header: 200;
	--z-modal: 400;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--t-fast: 0ms;
		--t-base: 0ms;
		--t-slow: 0ms;
	}
}