:root {
  --color-bg: #0b0f14;
  --color-bg-soft: #121821;
  --color-surface: #161d27;
  --color-surface-2: #1d2632;
  --color-text: #f5f7fa;
  --color-text-muted: #a9b4c0;
  --color-heading: #ffffff;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-primary: #6ee7b7;
  --color-primary-hover: #4fd1a1;
  --color-secondary: #60a5fa;
  --color-danger: #f87171;
  --color-overlay: rgba(0, 0, 0, 0.6);

  --container-width: 1200px;
  --container-wide: 1320px;
  --content-width: 860px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.18);
  --shadow-lg: 0 22px 56px rgba(0, 0, 0, 0.24);

  --font-base: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 42px;
  --text-4xl: 56px;

  --line-height-tight: 1.15;
  --line-height-base: 1.6;
  --line-height-loose: 1.8;

  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.45s ease;

  --header-height: 84px;
}

/* Light theme support */
html[data-theme="light"] {
  --color-bg: #f6f8fb;
  --color-bg-soft: #edf2f7;
  --color-surface: #ffffff;
  --color-surface-2: #f8fafc;
  --color-text: #16202a;
  --color-text-muted: #5f6f82;
  --color-heading: #0f1720;
  --color-border: rgba(15, 23, 32, 0.08);
  --color-primary: #0ea5a4;
  --color-primary-hover: #0b8f8e;
  --color-secondary: #2563eb;
  --color-overlay: rgba(0, 0, 0, 0.45);
}

@media (max-width: 991px) {
  :root {
    --header-height: 72px;
    --text-3xl: 36px;
    --text-4xl: 46px;
    --space-10: 56px;
    --space-11: 72px;
    --space-12: 88px;
  }
}

@media (max-width: 767px) {
  :root {
    --text-base: 15px;
    --text-md: 17px;
    --text-lg: 18px;
    --text-xl: 22px;
    --text-2xl: 28px;
    --text-3xl: 32px;
    --text-4xl: 40px;

    --space-8: 32px;
    --space-9: 40px;
    --space-10: 48px;
    --space-11: 56px;
    --space-12: 72px;
  }
}