:root {
  --color-bg: #0b0f14;
  --color-panel: #101826;
  --color-text: #e8eef7;
  --color-muted: #a9b4c2;
  --color-border: #243041;
  --color-accent: #6aa9ff;
  --color-accent-contrast: #06101f;
  --color-brand-highlight: #c792ff;

  --space-0: 0;
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 18px;
  --space-9: 20px;
  --space-10: 28px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-pill: 999px;
  --card-aspect-ratio: 85 / 53.98;
  --card-aspect-ratio-portrait: 53.98 / 85;
  --radius-card: 4px;

  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-md: 14px;
  --font-size-lg: 15px;
  --font-size-xl: 17px;
  --font-size-2xl: 18px;
  --font-size-3xl: 26px;

  --line-height-tight: 1.15;
  --line-height-compact: 1.2;
  --line-height-base: 1.35;

  --container-max-width: 1100px;
}


:root[data-theme="light"] {
  --color-bg: #f4f7fb;
  --color-panel: #ffffff;
  --color-text: #152238;
  --color-muted: #56657c;
  --color-border: #d3dcea;
  --color-accent: #225ec8;
  --color-accent-contrast: #f5f9ff;
  --color-brand-highlight: #4b2f9b;
}