/* ========================================
   CSS Custom Properties (CSS Variables)
   ======================================== */
:root {
  /* Brand Colors - Twitch Purple Theme */
  --color-primary: #9146FF;
  --color-accent: #772CE8;
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-text-hero: #ffffff;
  --color-text-secondary: #666666;
  --color-border: #e0e0e0;

  /* Spacing System (8px base unit) */
  --spacing-unit: 8px;
  --spacing-xs: calc(var(--spacing-unit) * 1);   /* 8px */
  --spacing-sm: calc(var(--spacing-unit) * 2);   /* 16px */
  --spacing-md: calc(var(--spacing-unit) * 4);   /* 32px */
  --spacing-lg: calc(var(--spacing-unit) * 8);   /* 64px */
  --spacing-xl: calc(var(--spacing-unit) * 12);  /* 96px */

  /* Typography */
  --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-size-base: 16px;
  --font-size-sm: 14px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 48px;
  --line-height-base: 1.6;
  --line-height-tight: 1.2;

  /* Effects */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 14px rgba(145, 70, 255, 0.4);
  --shadow-lg: 0 8px 20px rgba(145, 70, 255, 0.5);
  --shadow-purple: 0 10px 30px rgba(145, 70, 255, 0.3);
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;

  /* Layout */
  --max-width: 1200px;
  --border-radius: 8px;
  --border-radius-sm: 4px;
  --border-radius-lg: 12px;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a1a1a;
    --color-text: #f0f0f0;
    --color-text-secondary: #a0a0a0;
    --color-border: #333333;
  }
}