:root {
  color-scheme: dark;

  --font-display: "Outfit", "Noto Sans SC", system-ui, sans-serif;
  --font-body: "Noto Sans SC", "Outfit", system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Fira Code", monospace;

  /* ── Background layers ── */
  --bg-deep: #050608;
  --bg-base: #0a0c10;
  --bg-side: rgba(8, 10, 16, 0.92);
  --bg-context: rgba(10, 12, 18, 0.78);
  --bg-raised: #14181f;
  --bg-glass: #11151c;
  --bg-glass-light: #161c26;

  --stroke: rgba(255, 255, 255, 0.08);
  --stroke-strong: rgba(255, 255, 255, 0.14);
  --stroke-accent: rgba(94, 234, 212, 0.22);

  --text: #f4f6fb;
  --text-muted: #9aa3b5;
  --text-faint: #5f6878;

  --accent: #5eead4;
  --accent-2: #f97316;
  --accent-glow: rgba(94, 234, 212, 0.35);
  --accent-warm: rgba(249, 115, 22, 0.4);
  --accent-3: #a78bfa;
  --accent-3-glow: rgba(167, 139, 250, 0.3);

  --danger: #fb7185;
  --success: #4ade80;

  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-soft: 0 24px 80px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.35);
  --shadow-card-hover: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(94, 234, 212, 0.12);
  --shadow-glow-accent: 0 0 40px rgba(94, 234, 212, 0.15);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur: 0.45s;
  --dur-fast: 0.2s;

  /* ── Layout dimensions ── */
  --topbar-h: 52px;
  --content-max: 1200px;
  --page-pad: clamp(16px, 3.4vw, 48px);
  --content-gap: 1.25rem;

  /* ── Spacing scale ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
}