/* =====================================================================
   KINETIC — design tokens (v2, "the work is the hero")
   One committed dark world; the statement band flips to paper for a single
   breath of light. Customise the whole look from here:
     • Accent ........ --accent (rationed: cursor dot, reel dot, focus ring)
     • Fonts ......... --font-display (Fraunces) / --font-sans / --font-mono
     • Gutter ........ --gut (page edge; media runs edge-to-edge inside it)
   ===================================================================== */

/* ---------- Self-hosted Geist (body + UI; the sans sibling of the mono) ---------- */
@font-face {
	font-family: 'Geist';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/geist-variable.woff2') format('woff2');
}

/* ---------- Self-hosted Fraunces (display face — the voice of the site) ----
   Variable: weight + optical size. Roman only; the italic accent word is
   synthesised by the browser, which Fraunces tolerates well at display sizes. */
@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/fraunces-variable.woff2') format('woff2');
}

/* ---------- Self-hosted Geist Mono (metadata, nav, captions) ---------- */
@font-face {
	font-family: 'Geist Mono';
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url('../fonts/geist-mono-variable.woff2') format('woff2');
}

:root {
	/* Accent — one violet, used sparingly */
	--accent:        #8b7cff;
	--accent-2:      #b16cff;
	--accent-soft:   rgba(139, 124, 255, 0.16);
	--accent-glow:   rgba(139, 124, 255, 0.45);
	--grad-accent:   linear-gradient(100deg, var(--accent), var(--accent-2));

	/* Typography */
	--font-sans:    'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
	--font-mono:    'Geist Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

	/* Type scale */
	--fs-mono:    11.5px;
	--fs-body:    15px;
	--fs-lead:    clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
	--fs-h3:      clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
	--fs-h2:      clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
	--fs-h1:      clamp(2.6rem, 1.4rem + 5.4vw, 6rem);
	--fs-display: clamp(2.9rem, 1.2rem + 8.4vw, 8.2rem);
	--fs-giant:   clamp(4rem, 15vw, 15rem);

	/* Spacing + layout */
	--gut:          clamp(18px, 3.4vw, 44px);
	--gutter:       var(--gut);            /* legacy alias used by .container */
	--container:    1400px;
	--content-size: 720px;                 /* reading measure for case-study prose */
	--wide-size:    1200px;
	--section-y:    clamp(72px, 10vw, 140px);
	--header-h:     64px;

	/* Shape — media is square-cornered; only small UI keeps a radius */
	--radius-sm: 6px;
	--radius:    8px;
	--radius-lg: 8px;
	--radius-xl: 8px;

	/* Motion */
	--ease:     cubic-bezier(0.16, 1, 0.3, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur:      0.5s;

	/* Z-index scale */
	--z-header: 50;
	--z-nav:    45;
	--z-overlay:70;

	color-scheme: dark;
}

/* ---------- DARK (the committed look) ---------- */
:root,
[data-theme="dark"] {
	--bg:            #09090c;
	--bg-2:          #0e0e13;
	--surface:       rgba(255, 255, 255, 0.03);
	--surface-2:     rgba(255, 255, 255, 0.05);
	--surface-hover: rgba(255, 255, 255, 0.07);
	--border:        rgba(255, 255, 255, 0.10);
	--border-strong: rgba(255, 255, 255, 0.18);
	--text:          #ececef;
	--text-muted:    #8d8d99;
	--text-faint:    #6a6a76;
	--paper:         #e9e9ee;
	--paper-ink:     #0b0b10;
	--paper-mute:    #6a6a78;
	--shadow:        0 24px 60px -20px rgba(0, 0, 0, 0.7);
	--grain-opacity: 0.045;
	color-scheme: dark;
}

/* ---------- LIGHT (kept for the editor / any explicit opt-in) ---------- */
[data-theme="light"] {
	--bg:            #f4f4f7;
	--bg-2:          #ffffff;
	--surface:       rgba(10, 10, 25, 0.022);
	--surface-2:     rgba(10, 10, 25, 0.045);
	--surface-hover: rgba(10, 10, 25, 0.06);
	--border:        rgba(12, 12, 30, 0.1);
	--border-strong: rgba(12, 12, 30, 0.18);
	--text:          #0e0e14;
	--text-muted:    #55555f;
	--text-faint:    #6c6c76;
	--paper:         #0b0b10;
	--paper-ink:     #ececef;
	--paper-mute:    #8d8d99;
	--accent:        #5b4be6;
	--accent-2:      #9b4dff;
	--accent-soft:   rgba(91, 75, 230, 0.1);
	--accent-glow:   rgba(91, 75, 230, 0.28);
	--shadow:        0 24px 60px -28px rgba(30, 25, 70, 0.28);
	--grain-opacity: 0.025;
	color-scheme: light;
}