:root {
  /* Colors */
  --c-primary: #FF006E;
  --c-primary-dark: #C9005A;
  --c-primary-light: #FF4D94;
  --c-bg-dark: #1A1A2E;
  --c-bg-darker: #16213E;
  --c-bg-light: #F8F0FB;
  --c-accent: #FFD166;
  --c-success: #06D6A0;
  --c-danger: #EF476F;
  --c-text: #F8F0FB;
  --c-text-muted: #A0A0C0;
  --c-text-dark: #1A1A2E;
  --c-border: rgba(255, 255, 255, 0.1);
  --c-card: rgba(22, 33, 62, 0.8);
  --c-glass: rgba(255, 255, 255, 0.05);
  --c-overlay: rgba(26, 26, 46, 0.85);

  /* Gradients */
  --g-primary: linear-gradient(135deg, #FF006E, #C9005A);
  --g-hero: linear-gradient(135deg, #1A1A2E 0%, #16213E 50%, #1A1A2E 100%);

  /* Typography */
  --f-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-size-xs: 0.75rem;
  --f-size-sm: 0.875rem;
  --f-size-base: 1rem;
  --f-size-lg: 1.125rem;
  --f-size-xl: 1.5rem;
  --f-size-2xl: 2rem;
  --f-size-3xl: 2.5rem;
  --f-weight-regular: 400;
  --f-weight-semi: 600;
  --f-weight-bold: 700;

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

  /* Borders */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 20px rgba(255, 0, 110, 0.3);

  /* Transitions */
  --t-fast: 150ms ease;
  --t-base: 250ms ease;
  --t-slow: 400ms ease;

  /* Layout */
  --max-width: 1200px;
  --nav-height: 64px;
  --bottombar-height: 60px;
}

/* Light theme */
[data-theme="light"] {
  --c-bg-dark: #F5F0EB;
  --c-bg-darker: #EDE5DC;
  --c-bg-light: #1A1A2E;
  --c-text: #2D2D3A;
  --c-text-muted: #6B6B80;
  --c-text-dark: #1A1A2E;
  --c-border: rgba(0, 0, 0, 0.1);
  --c-card: rgba(255, 255, 255, 0.8);
  --c-glass: rgba(0, 0, 0, 0.03);
  --c-overlay: rgba(245, 240, 235, 0.9);
  --g-hero: linear-gradient(135deg, #F5F0EB 0%, #EDE5DC 50%, #F5F0EB 100%);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 20px rgba(255, 0, 110, 0.2);
}