:root {
  /* Primary Colors */
  --primary-start: #6b5aed;
  --primary-end: #a855f7;
  --primary-main: #8b5cf6;
  --primary-light: #a78bfa;

  /* Accent Color */
  --accent: #ff6b35;

  /* Light Mode */
  --bg-light: #f5f5f7;
  --card-light: #ffffff;
  --surface-light: #fafafa;
  --text-light: #2d2d2d;
  --text-secondary-light: #666666;
  --border-light: #e0e0e0;
  --placeholder-light: #9e9e9e;

  /* Dark Mode */
  --bg-dark: #1a1a2e;
  --card-dark: #252541;
  --surface-dark: #2d2d44;
  --text-dark: #ffffff;
  --text-secondary-dark: #b8b8d1;
  --border-dark: #3a3a52;
  --placeholder-dark: #6b6b8d;

  /* Common Colors */
  --white: #ffffff;
  --black: #000000;
  --success: #4caf50;
  --warning: #ffc107;
  --error: #f44336;
  --info: #2196f3;

  /* Star Colors */
  --star-active: #ff6b35;
  --star-inactive: #cccccc;

  /* Tag Colors */
  --tag-hot: #ff4757;
  --tag-practice: #ffa502;
  --tag-favorite: #ffd700;
  --tag-default: #8b5cf6;

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

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

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.25);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;

  /* Z-index */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-tooltip: 400;

  /* Container Width */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1400px;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--bg-dark);
    --card: var(--card-dark);
    --surface: var(--surface-dark);
    --text: var(--text-dark);
    --text-secondary: var(--text-secondary-dark);
    --border: var(--border-dark);
    --placeholder: var(--placeholder-dark);
  }
}

/* Light Mode Default */
:root {
  --bg: var(--bg-light);
  --card: var(--card-light);
  --surface: var(--surface-light);
  --text: var(--text-light);
  --text-secondary: var(--text-secondary-light);
  --border: var(--border-light);
  --placeholder: var(--placeholder-light);
}