:root {
  /* Background Colors */
  --bg-primary-color: #ffffff;
  --bg-secondary-color: #f5f5f5;
  --bg-tertiary-color: #e5e5e5;
  --bg-active-color: #262626;
  --bg-danger-color: #ef4444;
  --bg-success-color: #10b981;

  /* Text Colors */
  --text-primary-color: #0f0f0f;
  --text-secondary-color: #525252;
  --text-tertiary-color: #737373;
  --text-active-color: #f5f5f5;

  /* Accent Colors */
  --accent-color: #6366f1;
  --accent-secondary: #8b5cf6;
  --gradient-start: #f5f5f5;
  --gradient-end: #e5e5e5;

  /* Border */
  --border-color: #d4d4d4;

  /* Font Sizes */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;

  /* Padding */
  --padding-xs: 0.25rem;
  --padding-sm: 0.5rem;
  --padding-md: 1rem;
  --padding-lg: 1.5rem;
  --padding-xl: 2rem;
  --padding-2xl: 3rem;

  /* Margin */
  --margin-xs: 0.25rem;
  --margin-sm: 0.5rem;
  --margin-md: 1rem;
  --margin-lg: 1.5rem;
  --margin-xl: 2rem;
  --margin-2xl: 3rem;

  /* Border Radius */
  --border-radius-xs: 0.125rem;
  --border-radius-sm: 0.375rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 1rem;
  --border-radius-xl: 1.5rem;
  --border-radius-2xl: 2rem;

  /* Gutter */
  --gutter-xs: 0.25rem;
  --gutter-sm: 0.5rem;
  --gutter-md: 1rem;
  --gutter-lg: 1.5rem;
  --gutter-xl: 2rem;
  --gutter-2xl: 3rem;
}

/* Dark Theme */
[data-theme="dark"] {
  /* Background Colors */
  --bg-primary-color: #0f0f0f;
  --bg-secondary-color: #1a1a1a;
  --bg-tertiary-color: #252525;
  --bg-active-color: #e9e9e9;
  --bg-danger-color: #ef4444;
  --bg-success-color: #10b981;

  /* Text Colors */
  --text-primary-color: #f5f5f5;
  --text-secondary-color: #a3a3a3;
  --text-tertiary-color: #737373;
  --text-active-color: #0f0f0f;

  /* Accent Colors */
  --accent-color: #6366f1;
  --accent-secondary: #8b5cf6;
  --gradient-start: #1a1a1a;
  --gradient-end: #252525;
  
  /* Border */
  --border-color: #333333;
}