:root {
  /* Brand palette */
  --color-primary: #1f2937;
  --color-accent: #2563eb;
  --color-accent-deep: #1d4ed8;
  --color-accent-text: #1d4ed8;
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-alt: #f2f5fa;
  --color-surface-deep: #e7ecf4;
  --color-mist: #e6ebf4;
  --color-text: #1f2937;
  --color-text-muted: #51607a;
  --color-border: #dbe2ec;
  --color-on-dark: #f8fafc;
  --color-on-dark-muted: #c3ccdb;
  --color-accent-soft: #dbeafe;
  --color-focus: #2563eb;
  --color-inverse: #ffffff;

  /* Type */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Spacing */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 4rem;
  --space-5: 7rem;

  /* Layout */
  --max-width: 1120px;
  --header-height: 4.25rem;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(31, 41, 55, 0.06);
  --shadow-md: 0 12px 30px -12px rgba(31, 41, 55, 0.18);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #14181f;
    --color-surface: #1c2230;
    --color-surface-alt: #171c26;
    --color-surface-deep: #212a3a;
    --color-text: #e6eaf2;
    --color-text-muted: #9aa6b8;
    --color-border: #2b3342;
    --color-on-dark: #e6eaf2;
    --color-on-dark-muted: #9aa6b8;
    --color-accent: #2563eb;
    --color-accent-deep: #1d4ed8;
    --color-accent-text: #60a5fa;
    --color-accent-soft: #17233f;
  }
}