/*
 * DiviTorque — Design Tokens
 * Source of truth: 02-DESIGN-SYSTEM.md (rendered in style-tile.html).
 *
 * Three tiers: PRIMITIVES → SEMANTIC → COMPONENT.
 * Components reference SEMANTIC tokens only, so dark mode / a rebrand /
 * a per-product accent is a one-layer remap. Never use primitives directly
 * in components.
 *
 * Fonts (self-hosted, Latin subset, weights 400/500/600):
 *   Geist  → headings + header menu (--font-display)
 *   Inter  → body / normal text    (--font-sans)
 */

/* ─── Geist (display: headings + header menu) ─────────────────────── */
@font-face {
	font-family: "Geist";
	src: url("../fonts/Geist-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Geist";
	src: url("../fonts/Geist-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Geist";
	src: url("../fonts/Geist-Semibold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* ─── Inter (body / normal text) ──────────────────────────────────── */
@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-Semibold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* ─── Tier 1 · Primitives (raw values — never used in components) ──── */
:root {
	/* neutral ramp */
	--gray-0:#FFFFFF; --gray-50:#F7F7F8; --gray-100:#ECECEC; --gray-200:#E1E1E2; --gray-300:#CFCFD1;
	--gray-400:#A8A8AB; --gray-500:#8E8E8E; --gray-600:#5B5B5B; --gray-700:#3A3A3C; --gray-800:#222224; --gray-900:#0D0D0D;

	/* expressive mesh hues (imagery / icons only) */
	--mesh-peach:#FFD2A6; --mesh-coral:#FF9E80; --mesh-pink:#FF8FB1; --mesh-sky:#A9CBFF; --mesh-indigo:#7C8CFF;
	--mesh-peri:#B9A6FF; --mesh-violet:#9C8CFF; --mesh-mint:#BDF0C8; --mesh-aqua:#9BE7E0; --mesh-amber:#FFC178;
	--mesh-magenta:#E879A6; --mesh-grass:#8FD7A8;

	/* spacing (4px base) */
	--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
	--space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px; --space-11:160px;

	/* radius */
	--radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px;

	/* type sizes (fluid) */
	--text-sm:.875rem; --text-base:1.0625rem; --text-lg:1.25rem;
	--text-xl:clamp(1.375rem,2vw,1.75rem); --text-2xl:clamp(2rem,3.6vw,2.75rem); --text-3xl:clamp(2.75rem,5.2vw,4.5rem); --text-label:.8125rem;

	/* weights */
	--fw-reg:400; --fw-med:500; --fw-semi:600;
	/* line-height (consistent across the site) */
	--lh-display:1.05; --lh-heading:1.2; --lh-body:1.6; --lh-relaxed:1.7;

	/* elevation (flat-first; sparing) */
	--shadow-sm:0 1px 2px rgba(13,13,13,.05); --shadow-md:0 8px 24px rgba(13,13,13,.08); --shadow-lg:0 24px 70px rgba(13,13,13,.14);

	/* motion */
	--dur-fast:120ms; --dur-base:180ms; --dur-slow:320ms; --ease:cubic-bezier(.2,.6,.2,1);

	/* fonts + layout */
	--font-sans:"Inter",-apple-system,system-ui,sans-serif;        /* body / normal text */
	--font-display:"Geist",-apple-system,system-ui,sans-serif;     /* headings + header menu */
	--container:1120px; --gutter:24px;
	/* one consistent vertical rhythm for full-width section bands */
	--section-y: clamp(56px, 7vw, 96px);
}

/* ─── Tier 2 · Semantic tokens — light (components reference ONLY these) */
:root {
	--color-bg:var(--gray-0); --color-surface:var(--gray-50); --color-surface-2:var(--gray-0);
	--color-text:var(--gray-900); --color-text-muted:var(--gray-600); --color-text-faint:var(--gray-500);
	--color-border:var(--gray-100); --color-action:var(--gray-900); --color-action-hover:var(--gray-800);
	--color-on-action:var(--gray-0); --color-focus:var(--gray-900);
	color-scheme: light;
}

/* ─── Tier 2 · Semantic tokens — dark map ─────────────────────────── */
/* Dark sections (final CTA, footer) set data-theme="dark" on the wrapper. */
[data-theme="dark"] {
	--color-bg:var(--gray-900); --color-surface:#161618; --color-surface-2:#1d1d20;
	--color-text:var(--gray-50); --color-text-muted:var(--gray-400); --color-text-faint:var(--gray-500);
	--color-border:#2a2a2e; --color-action:var(--gray-0); --color-action-hover:var(--gray-100);
	--color-on-action:var(--gray-900); --color-focus:var(--gray-0);
	color-scheme: dark;
}