:root {
  /* ── Core palette (Linear / Vercel dark) ── */
  --bg: #030303;
  --bg-alt: #080808;
  --fg: #f5f5f7;
  --muted: #86868b;
  --signal: #ff5c00;
  --line: rgba(255, 255, 255, 0.04);

  /* ── Derived surfaces ── */
  --bg-elevated: #0a0a0a;
  --bg-card: var(--bg-alt);
  --fg-dim: color-mix(in srgb, var(--fg) 68%, transparent);
  --line-strong: rgba(255, 255, 255, 0.08);
  --line-focus: rgba(255, 255, 255, 0.14);
  --border: 1px solid var(--line);
  --border-strong: 1px solid var(--line-strong);

  /* ── Signal derivatives ── */
  --signal-dim: color-mix(in srgb, var(--signal) 62%, transparent);
  --signal-glow: rgba(255, 92, 0, 0.42);
  --signal-ink: #030303;
  --signal-soft: color-mix(in srgb, var(--signal) 12%, transparent);

  /* ── Accent (cyber secondary) ── */
  --accent-cyan: #00e5c7;
  --accent-cyan-dim: color-mix(in srgb, var(--accent-cyan) 38%, transparent);

  /* ── Typography stacks ── */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* ── Fluid type scale (aggressive clamp) ── */
  --text-xs: clamp(0.625rem, 0.58rem + 0.18vw, 0.6875rem);
  --text-sm: clamp(0.75rem, 0.7rem + 0.22vw, 0.8125rem);
  --text-base: clamp(0.9375rem, 0.86rem + 0.34vw, 1.0625rem);
  --text-lg: clamp(1.0625rem, 0.94rem + 0.52vw, 1.3125rem);
  --text-xl: clamp(1.3125rem, 1.02rem + 1.1vw, 1.875rem);
  --text-2xl: clamp(1.625rem, 1.05rem + 2.4vw, 3rem);
  --text-3xl: clamp(2.125rem, 1.35rem + 3.6vw, 4.5rem);
  --text-4xl: clamp(2.75rem, 1.65rem + 5.8vw, 6.75rem);
  --text-5xl: clamp(3.25rem, 1.85rem + 7.5vw, 8.25rem);
  --text-hero: clamp(2.5rem, 1.5rem + 4.2vw, 4.75rem);

  /* ── Display rhythm ── */
  --leading-tight: 0.85;
  --leading-snug: 0.92;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;
  --tracking-tight: -0.05em;
  --tracking-snug: -0.03em;
  --tracking-mono: 0.12em;

  /* ── Cosmic glows ── */
  --glow-signal: radial-gradient(ellipse 62% 48% at 50% -8%, rgba(255, 92, 0, 0.13), transparent 68%);
  --glow-cyan: radial-gradient(ellipse 48% 38% at 82% 18%, rgba(0, 229, 199, 0.055), transparent 62%);
  --glow-deep: radial-gradient(ellipse 72% 58% at 14% 96%, rgba(255, 92, 0, 0.045), transparent 58%);
  --glow-hero: radial-gradient(ellipse 90% 70% at 68% 42%, rgba(255, 92, 0, 0.08), transparent 62%);

  /* ── Layout grid ── */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --max: min(92vw, 1440px);
  --section-pad: clamp(5rem, 14vh, 10rem);
  --header-h: 4.5rem;
  --header-offset: 5.5rem;
  --bento-gap: 1px;
  --bento-radius: 0px;
  --cell-pad: clamp(1.5rem, 3vw, 2.25rem);

  /* ── Motion ── */
  --ease-signal: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
  --ease-spotlight: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 0.22s;
  --duration-base: 0.38s;
  --duration-slow: 0.65s;

  /* ── Spotlight / mouse (updated via JS) ── */
  --mouse-x: 50%;
  --mouse-y: 50%;
  --mouse-opacity: 0;
  --spot-x: var(--mouse-x);
  --spot-y: var(--mouse-y);
  --spot-opacity: var(--mouse-opacity);
  --spotlight-fill-size: 560px;
  --spotlight-border-size: 420px;
  --spotlight-fill-alpha: 0.11;
  --spotlight-border-alpha: 0.48;

  /* ── Grain (SVG turbulence tile) ── */
  --grain-opacity: 0.042;
  --grain-size: 220px;
  --grain-filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

@media (max-width: 900px) {
  :root {
    --text-hero: clamp(2.35rem, 1.35rem + 7vw, 3.75rem);
    --text-4xl: clamp(2rem, 1.2rem + 4.5vw, 3.25rem);
    --text-3xl: clamp(1.65rem, 1rem + 3vw, 2.5rem);
    --text-2xl: clamp(1.35rem, 0.95rem + 2vw, 1.85rem);
    --section-pad: clamp(3.5rem, 10vh, 5.5rem);
    --gutter: clamp(1rem, 4vw, 1.5rem);
    --header-offset: 4.75rem;
  }
}

@media (max-width: 540px) {
  :root {
    --text-hero: clamp(2rem, 1.1rem + 8vw, 2.85rem);
    --cell-pad: 1.15rem;
  }
}

[data-theme="light"] {
  color-scheme: light;
  /* Warm sandstone palette — layered tonal surfaces instead of near-white.
     Each surface has a distinct luminance step so cards, elevated panels,
     recessed strips and the page background read as architecture, not as a
     flat white sheet. Orange is woven into surfaces, lines and glows. */
  --bg: #ece4d8;
  --bg-alt: #e0d7c8;
  --bg-elevated: #f1e9dc;
  --bg-card: #f5efe3;
  --fg: #1a1612;
  --fg-dim: color-mix(in srgb, var(--fg) 74%, transparent);
  --muted: #56524a;
  --line: color-mix(in srgb, var(--signal) 16%, rgba(60, 40, 20, 0.08));
  --line-strong: color-mix(in srgb, var(--signal) 30%, rgba(60, 40, 20, 0.12));
  --line-focus: color-mix(in srgb, var(--signal) 42%, rgba(60, 40, 20, 0.16));
  --signal-ink: #ffffff;
  --signal-dim: color-mix(in srgb, var(--signal) 78%, transparent);
  --signal-glow: rgba(255, 92, 0, 0.4);
  --signal-soft: color-mix(in srgb, var(--signal) 18%, transparent);
  --glow-signal: radial-gradient(ellipse 62% 48% at 50% -8%, rgba(255, 92, 0, 0.14), transparent 68%);
  --glow-cyan: radial-gradient(ellipse 48% 38% at 82% 18%, rgba(0, 229, 199, 0.06), transparent 62%);
  --glow-deep: radial-gradient(ellipse 72% 58% at 14% 96%, rgba(255, 92, 0, 0.085), transparent 58%);
  --glow-hero: radial-gradient(ellipse 90% 70% at 68% 42%, rgba(255, 92, 0, 0.12), transparent 62%);
  --grain-opacity: 0.03;
  --spotlight-fill-alpha: 0.18;
  --spotlight-border-alpha: 0.62;
}