:root {
  /* Colors */
  --color-bg: #0a0a0a;
  --color-bg-2: #111111;
  --color-bg-card: #141414;
  --color-bg-card-2: #1a1a1a;
  --color-primary: #ffffff;
  --color-secondary: #999999;
  --color-accent: #e8d5a3;
  --color-accent-2: #c9a96e;
  --color-border: rgba(255,255,255,0.08);
  --color-border-2: rgba(255,255,255,0.12);
  --color-tag-bg: rgba(255,255,255,0.06);
  --color-success: #4caf50;
  --color-error: #f44336;

  /* Typography */
  --font-body: 'Inter', sans-serif;
  --font-heading: 'Inter', sans-serif;

  /* Sizing */
  --container-max: 1200px;
  --container-pad: 48px;

  /* Spacing */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 80px;
  --space-xxl: 120px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-mid: 0.35s ease;
  --transition-slow: 0.6s ease;
}

@media (max-width: 991px) {
  :root {
    --container-pad: 32px;
    --space-xl: 60px;
    --space-xxl: 80px;
  }
}

@media (max-width: 767px) {
  :root {
    --container-pad: 20px;
    --space-xl: 48px;
    --space-xxl: 64px;
  }
}