/*
  Design tokens for the foundation layer.
  Centralizing variables keeps future pages consistent and easy to scale.
*/
:root {
  --color-bg: #0b1220;
  --color-surface: #111a2e;
  --color-surface-2: #16233d;
  --color-text: #eaf0ff;
  --color-text-muted: #b9c4dd;
  --color-border: rgba(255, 255, 255, 0.10);
  --color-accent: #4c8dff;
  --color-accent-strong: #72a7ff;
  --color-success: #39d98a;
  --color-focus: #8fb6ff;

  --font-sans: "Segoe UI", "Inter", Arial, sans-serif;

  --container-width: 1200px;
  --container-gutter: 24px;
  --section-gap: clamp(3.5rem, 7vw, 7rem);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;

  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 18px 50px rgba(0, 0, 0, 0.24);

  --transition-fast: 160ms ease;
  --transition-base: 240ms ease;
}