/* ============================================================
   variables.css — design tokens (true-black + ice-cyan system)
   ============================================================ */
:root {
  /* --- Palette: cold, true black --- */
  --bg: #050506;
  --bg-1: #08090b;
  --bg-2: #0c0e11;
  --surface: rgba(255, 255, 255, 0.014);
  --surface-2: rgba(255, 255, 255, 0.03);
  --hairline: rgba(255, 255, 255, 0.10);
  --hairline-strong: rgba(255, 255, 255, 0.18);

  /* --- Accent: ice-cyan --- */
  --accent: #22d3ee;
  --accent-bright: #67e8f9;
  --accent-dim: #0e7490;
  --accent-glow: rgba(34, 211, 238, 0.35);
  --accent-faint: rgba(34, 211, 238, 0.08);

  /* --- Text --- */
  --text: #e7ecef;
  --text-soft: #aab4bb;
  --text-mute: #6b757c;
  --text-faint: #454d53;

  /* --- Type --- */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Fluid type scale */
  --fs-hero: clamp(3.2rem, 11vw, 9.5rem);
  --fs-h2: clamp(2rem, 4.5vw, 3.4rem);
  --fs-h3: clamp(1.3rem, 2.2vw, 1.75rem);
  --fs-lead: clamp(1.05rem, 1.6vw, 1.35rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  /* --- Spacing --- */
  --space-section: clamp(6rem, 14vh, 11rem);
  --gutter: clamp(1.25rem, 5vw, 6rem);
  --maxw: 1240px;

  /* --- Motion: custom easing curves --- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.28s;
  --dur: 0.6s;
  --dur-slow: 1.1s;

  /* --- Misc --- */
  --radius: 2px; /* sharp-edged blueprint language */
  --nav-h: 72px;
  --z-bg: 0;
  --z-content: 2;
  --z-nav: 40;
  --z-modal: 90;
}