/**
 * THEEB design tokens.
 *
 * Single source of truth for colour, type, space, shape and motion.
 * Nothing below this file should hardcode a hex value or a pixel radius.
 *
 * Derived from the THEEB AI Website design prototype (2026-07-25) by sampling
 * computed styles; the muted text tiers were lightened to clear WCAG AA, which
 * the prototype did not.
 */

:root {
	/* ---- Brand ---------------------------------------------------------- */
	--c-bg: #0c0705; /* warm brown-black, not neutral */
	--c-bg-raised: #100b07;
	--c-ink: #f5ece2;
	--c-sand: #e3cca5;
	--c-copper: #a75f27;
	--c-copper-deep: #783819;
	/* Copper is only 4.11:1 on --c-bg, so small copper text (eyebrows, required
	   markers) uses this lighter tint at 6.0:1. Decorative copper stays above. */
	--c-copper-text: #c67b38;
	/* Ink for filled buttons. Paired with --g-cta's lightened end stop below;
	   at the original #a75f27 terminus even pure black only reached 4.31:1. */
	--c-on-cta: #1f1005;
	--c-ok: #7ccb8f;

	/* Text tiers. --c-muted-3/-4 are lightened from the prototype's
	   #7a6a5b / #5a4a3b, which failed AA at 3.85:1 and 2.36:1. */
	--c-muted-1: #c9b8a6; /* 10.4:1 */
	--c-muted-2: #a99884; /*  7.2:1 */
	--c-muted-3: #8d7d6e; /*  5.1:1 */
	--c-muted-4: #9a8877; /*  6.0:1 — was #7a6a5b */
	--c-faint: #8a7867;   /*  4.7:1 — was #5a4a3b */

	/* ---- Alpha derivations ---------------------------------------------
	   The prototype's coherence comes from one rule: surfaces are copper at
	   low alpha, hairlines are sand at low alpha. Keep it that way. */
	--c-line: rgb(227 204 165 / 0.13);
	--c-line-soft: rgb(227 204 165 / 0.08);
	--c-line-strong: rgb(227 204 165 / 0.22);
	--c-surface: rgb(255 255 255 / 0.02);
	--c-surface-raised: rgb(255 255 255 / 0.035);
	--c-copper-wash: rgb(167 95 39 / 0.16);
	--c-copper-wash-soft: rgb(167 95 39 / 0.09);
	--c-sand-wash: rgb(227 204 165 / 0.12);
	--c-ok-wash: rgb(124 203 143 / 0.12);

	/* ---- Gradients ------------------------------------------------------ */
	--g-page: radial-gradient(120% 80% at 50% -10%, rgb(167 95 39 / 0.18), transparent 55%),
		radial-gradient(90% 60% at 82% 108%, rgb(120 56 25 / 0.15), transparent 60%);
	--g-accent: linear-gradient(100deg, var(--c-sand), var(--c-copper) 60%, var(--c-copper-deep));
	--g-cta: linear-gradient(100deg, var(--c-sand), #b87038);
	--g-panel: linear-gradient(rgb(28 19 13 / 0.96), rgb(16 11 7 / 0.98));
	--g-panel-soft: linear-gradient(rgb(28 19 13 / 0.7), rgb(16 11 7 / 0.5));
	--g-glow: radial-gradient(circle at 60% 40%, rgb(167 95 39 / 0.35), transparent 65%);

	/* ---- Type ----------------------------------------------------------- */
	--f-sans: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

	/* Fluid display sizes: the prototype jumps straight from UI text to a
	   large display with nothing between, so the scale is deliberately gappy. */
	--t-display: clamp(2.75rem, 1.6rem + 5.1vw, 5rem);
	--t-h2: clamp(2rem, 1.35rem + 2.9vw, 3.25rem);
	--t-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
	--t-lead: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
	--t-body: 1rem;
	--t-sm: 0.9063rem;
	--t-xs: 0.8438rem;
	--t-eyebrow: 0.75rem;

	--lh-tight: 1.02;
	--lh-heading: 1.08;
	--lh-body: 1.6;

	/* ---- Space (4px base) ----------------------------------------------- */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.5rem;
	--s-6: 2rem;
	--s-7: 2.5rem;
	--s-8: 3rem;
	--s-9: 4rem;
	--s-10: 5rem;
	--s-section: clamp(4rem, 2rem + 8vw, 7.5rem);

	/* ---- Shape ---------------------------------------------------------- */
	--r-sm: 9px;
	--r-md: 11px;
	--r-lg: 13px;
	--r-xl: 16px;
	--r-2xl: 18px;
	--r-3xl: 24px;
	--r-pill: 999px;

	/* Wider than the prototype's 1240px: on a 1440-and-up display the old
	   1200px cap left the page marooned in the middle of the viewport. Prose
	   still gets --container-narrow so line length stays readable. */
	--container: 1360px;
	--container-narrow: 880px;

	/* ---- Elevation ------------------------------------------------------ */
	--shadow-card: 0 1px 0 rgb(255 255 255 / 0.03) inset;
	--shadow-lift: 0 18px 40px -24px rgb(0 0 0 / 0.9);
	--shadow-cta: 0 10px 34px -12px rgb(167 95 39 / 0.55);

	/* ---- Motion --------------------------------------------------------- */
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--dur-fast: 0.18s;
	--dur: 0.3s;
	--dur-slow: 0.8s;

	/* ---- Layering ------------------------------------------------------- */
	--z-nav: 100;
	--z-menu: 110;
	--z-drawer: 120;
}