:root {
  --blue: #007AFF;
  --blue-bright: #4DA3FF;
  --blue-soft: rgba(0, 122, 255, 0.14);
  --slate: #64748B;
  --navy: #1A2B4C;

  --font-display: "Outfit", "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --nav-h: 68px;
  --maxw: 1180px;
  --radius: 14px;
  --ease: cubic-bezier(0.22, 0.9, 0.28, 1);
}

[data-theme="dark"] {
  --bg: #070d1a;
  --bg-2: #0b1424;
  --surface: #101b33;
  --surface-2: #16233f;
  --border: rgba(148, 163, 184, 0.14);
  --text: #e8edf7;
  --text-muted: #93a1b8;
  --grid-line: rgba(0, 122, 255, 0.05);
  --glow-1: rgba(0, 122, 255, 0.14);
  --glow-2: rgba(26, 43, 76, 0.55);
  --shadow: 0 24px 60px rgba(2, 6, 16, 0.55);
  --nav-bg: rgba(7, 13, 26, 0.78);
  --placeholder-dash: rgba(100, 116, 139, 0.5);
  --duo-shadow: var(--navy);
  --duo-mid: color-mix(in srgb, var(--blue) 55%, var(--slate) 45%);
  --duo-highlight: var(--blue-bright);
  --scanline: rgba(7, 13, 26, 0.22);
}

[data-theme="light"] {
  --bg: #f4f6fb;
  --bg-2: #eaeef6;
  --surface: #ffffff;
  --surface-2: #f0f3fa;
  --border: rgba(26, 43, 76, 0.12);
  --text: #17233b;
  --text-muted: #5b6b85;
  --grid-line: rgba(26, 43, 76, 0.05);
  --glow-1: rgba(0, 122, 255, 0.1);
  --glow-2: rgba(100, 116, 139, 0.16);
  --shadow: 0 24px 48px rgba(26, 43, 76, 0.12);
  --nav-bg: rgba(244, 246, 251, 0.8);
  --placeholder-dash: rgba(100, 116, 139, 0.55);
  --duo-shadow: var(--slate);
  --duo-mid: color-mix(in srgb, var(--blue-bright) 55%, var(--slate) 45%);
  --duo-highlight: rgba(0, 122, 255, 0.35);
  --scanline: rgba(23, 35, 59, 0.12);
}