:root {
  /* === COLOR === */
  --void: #0A0A0A;
  --surface: #131313;
  --surface-2: #1A1A1A;
  --surface-3: #222222;

  /* "heat" = physical/fab side — electric green (welders see green) */
  --heat: #3DDC97;
  --heat-dim: #1FA775;
  --heat-glow: #5DE6AA;

  /* "signal" = digital/software side — turquoise */
  --signal: #22D3EE;
  --signal-dim: #0E9FB5;
  --signal-glow: #67E8F9;

  --warm: #F0EDE6;
  --warm-65: rgba(240, 237, 230, 0.65);
  --warm-40: rgba(240, 237, 230, 0.40);
  --warm-20: rgba(240, 237, 230, 0.20);
  --warm-08: rgba(240, 237, 230, 0.08);
  --warm-04: rgba(240, 237, 230, 0.04);

  --grad-bridge: linear-gradient(90deg, var(--heat) 0%, var(--signal) 100%);
  --grad-heat-vert: linear-gradient(180deg, var(--heat) 0%, transparent 100%);

  /* === TYPE === */
  --f-display: "Rubik", system-ui, sans-serif;
  --f-body: "Geist", "Inter", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  --fs-mono-xs: 11px;
  --fs-mono-sm: 13px;
  --fs-body: 17px;
  --fs-body-lg: 20px;
  --fs-h6: 14px;
  --fs-h5: 18px;
  --fs-h4: 24px;
  --fs-h3: clamp(28px, 3.5vw, 48px);
  --fs-h2: clamp(40px, 6vw, 84px);
  --fs-h1: clamp(60px, 10vw, 168px);

  --lh-tight: 0.92;
  --lh-snug: 1.1;
  --lh-body: 1.55;

  --tr-display: -0.04em;
  --tr-tight: -0.02em;
  --tr-mono: 0.02em;
  --tr-wide: 0.18em;

  /* === SPACE === */
  --gutter: clamp(20px, 4vw, 64px);
  --section-pad: clamp(80px, 12vw, 200px);

  /* === MOTION === */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-med: 500ms;
  --dur-slow: 900ms;

  /* === FX === */
  --shadow-heat: 0 0 60px rgba(61, 220, 151, 0.35);
  --shadow-signal: 0 0 60px rgba(34, 211, 238, 0.30);
  --grain-opacity: 0.045;

  /* === CUBE === */
  --cube-size: clamp(200px, 28vw, 380px);
  --cube-half: calc(var(--cube-size) / 2);
}