:root {
	/* Color — dark-first by design (not an OS-preference fallback): near-black
	   surfaces, neon-yellow accent, every section background a gradient or a
	   subtle pattern, never a flat fill. Case-study single pages flip this to
	   a white/light palette via the body.single-case_study override below —
	   everything else on the site stays dark. */
	--bg: #0a0a0c;
	--bg-secondary: #141416;
	--bg-tertiary: #000000;
	--surface: #17171a;
	--border: rgba(255, 255, 255, 0.1);
	--border-strong: rgba(255, 255, 255, 0.18);
	--text: #f5f5f7;
	--text-dim: #a6a6ac;
	--text-faint: #7a7a80;
	--accent: #e8ff3d;
	--accent-dim: #c7e02a;
	--accent-glow: rgba(232, 255, 61, 0.22);
	--on-accent: #0a0a0c;
	--danger: #ff453a;

	/* Gradients & patterns — used in place of every flat section background.
	   --grad-base is the page body; --grad-alt is the alternating-band
	   gradient (replaces the old solid bg-secondary fill); --pattern-dots is
	   a very low-opacity dot grid layered on top for texture. */
	--grad-base: radial-gradient(120% 60% at 50% 0%, #1c1c14 0%, #0a0a0c 45%, #000000 100%);
	--grad-alt: linear-gradient(160deg, #16160f 0%, #0a0a0c 55%, #000000 100%);
	--grad-accent: linear-gradient(135deg, #e8ff3d 0%, #b8d400 100%);
	--pattern-dots: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	--pattern-size: 26px 26px;

	/* Type — system font stack renders as true SF Pro on Apple devices (Apple
	   restricts SF for embedding outside Apple platforms, so this is the
	   correct way to get it) and falls back to Inter elsewhere, never Arial. */
	--font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Helvetica Neue', Arial, sans-serif;
	--font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif;
	--font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

	--fs-hero: clamp(2.75rem, 6.8vw, 6.5rem);
	--fs-xxl: clamp(2rem, 4.4vw, 3.5rem);
	--fs-xl: clamp(1.5rem, 2.6vw, 2.25rem);
	--fs-lg: clamp(1.25rem, 1.6vw, 1.5rem);
	--fs-md: 1.1875rem;
	--fs-base: 1.0625rem;
	--fs-sm: 0.9375rem;
	--fs-xs: 0.8125rem;

	/* Space — generous, Apple product pages breathe */
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2.5rem;
	--space-5: 4.5rem;
	--space-6: 7rem;
	--space-7: 10rem;
	--gutter: clamp(1.5rem, 5vw, 5rem);

	/* Motion — Apple's own marketing-site deceleration curve */
	--ease-out: cubic-bezier(0.28, 0.11, 0.32, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--dur-fast: 0.2s;
	--dur-base: 0.45s;
	--dur-slow: 0.9s;

	/* Layout */
	--max-width: 1200px;
	--radius: 18px;
	--radius-sm: 12px;
	--radius-pill: 980px;
	--nav-h: 52px;
	--z-nav: 1000;
	--z-cursor: 9999;
	--z-terminal: 9000;
	--z-overlay: 8000;
}

/* ---------------------------------------------------------------------
   Case-study single pages: the PAGE stays dark like the rest of the site
   (nav, back-link, Woven hero, tablet bezel) — only the tablet's own
   "screen" surface (.zi-tablet-frame and everything inside it) goes
   white, since that's meant to read as a physical device screen, not the
   page background. Scoped to .zi-tablet-frame, not body, so it can never
   leak out to the rest of the page again. The accent shifts to a
   darkened gold inside the screen so text/links keep AA contrast on
   white — the neon --accent value doesn't read on a light background.
   --------------------------------------------------------------------- */
.zi-tablet-frame {
	--bg: #ffffff;
	--bg-secondary: #f5f5f7;
	--bg-tertiary: #fbfbfd;
	--surface: #ffffff;
	--border: rgba(0, 0, 0, 0.08);
	--border-strong: rgba(0, 0, 0, 0.14);
	--text: #1d1d1f;
	--text-dim: #3a3a3c;
	--text-faint: #515154;
	--accent: #8a7000;
	--accent-dim: #6b5700;
	--accent-glow: rgba(138, 112, 0, 0.16);
	--on-accent: #ffffff;
	--grad-alt: linear-gradient(160deg, #f5f5f7 0%, #ffffff 100%);
	--grad-accent: linear-gradient(135deg, #b8960c 0%, #8a7000 100%);
	--pattern-dots: radial-gradient(rgba(0, 0, 0, 0.045) 1px, transparent 1px);
	/* Re-declaring the vars isn't enough: text with no colour rule of its
	   own inherits body's already-computed light #f5f5f7, so set it here. */
	color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 0.001s;
		--dur-base: 0.001s;
		--dur-slow: 0.001s;
	}
}