/* ===== Design System Variables ===== */

:root {
  /* Primary palette */
  --color-primary: #6C5CE7;
  --color-primary-hover: #5A4BD1;
  --color-primary-light: rgba(108, 92, 231, 0.1);
  --color-accent: #EC4899;

  /* Backgrounds & surfaces */
  --color-bg: #F7F8FC;
  --color-surface: #FFFFFF;
  --color-surface-2: #FBFBFE;
  --color-surface-hover: #F1F3F8;
  --color-border: #E7EAF1;
  --color-border-strong: #D6DBE6;
  --color-surface-rgb: 255, 255, 255;

  /* Text */
  --color-text-primary: #16181F;
  --color-text: #16181F;
  --color-text-secondary: #5A6577;
  --color-text-muted: #94A3B8;

  /* Platform colors */
  --color-youtube: #FF0033;
  --color-yt-shorts: #FF6D00;
  --color-tiktok: #00F2EA;
  --color-twitch: #9146FF;
  --color-spotify: #1DB954;
  --color-instagram: #E1306C;
  --color-kwai: #FF4906;
  --color-substack: #FF6719;
  --color-pinterest: #E60023;

  /* Gradients */
  --gradient-hero: linear-gradient(135deg, #6C5CE7 0%, #A855F7 50%, #EC4899 100%);
  --gradient-primary: linear-gradient(135deg, #7C6CF0 0%, #6C5CE7 100%);
  --gradient-card: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0));
  --gradient-gold: linear-gradient(135deg, #FFD56B, #F39C12);

  /* Shadows — layered & soft for a premium feel */
  --shadow-sm: 0 1px 2px rgba(17,24,39,0.05), 0 1px 3px rgba(17,24,39,0.05);
  --shadow-md: 0 4px 16px -4px rgba(17,24,39,0.10), 0 2px 6px -2px rgba(17,24,39,0.06);
  --shadow-lg: 0 24px 48px -12px rgba(17,24,39,0.18), 0 8px 20px -8px rgba(17,24,39,0.10);
  --shadow-xl: 0 40px 80px -20px rgba(17,24,39,0.28), 0 12px 32px -10px rgba(17,24,39,0.14);
  --shadow-glow: 0 10px 34px rgba(108, 92, 231, 0.32);

  /* Typography */
  --font-primary: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --tracking-tight: -0.02em;
  --tracking-tighter: -0.035em;

  /* Spacing scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== Dark Mode Overrides ===== */
[data-theme="dark"] {
  --color-bg: #0B1020;
  --color-surface: #151B2E;
  --color-surface-2: #1B2236;
  --color-surface-hover: #232C44;
  --color-border: #2A3450;
  --color-border-strong: #3A466A;
  --color-surface-rgb: 21, 27, 46;
  --color-text-primary: #F1F5F9;
  --color-text: #F1F5F9;
  --color-text-secondary: #A6B2C8;
  --color-text-muted: #6B7894;
  --gradient-card: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px -4px rgba(0,0,0,0.5), 0 2px 6px -2px rgba(0,0,0,0.4);
  --shadow-lg: 0 24px 48px -12px rgba(0,0,0,0.6), 0 8px 20px -8px rgba(0,0,0,0.5);
  --shadow-xl: 0 40px 80px -20px rgba(0,0,0,0.7), 0 12px 32px -10px rgba(0,0,0,0.5);
}