/* Base CSS Variables - Mapped from theme-specific values */
:root {
  /* Primary colors */
  --color-primary: var(--theme-primary);
  --color-primary-hover: var(--theme-primary-hover);
  --color-primary-light: var(--theme-primary-light);

  /* Accent colors */
  --color-accent: var(--theme-accent);
  --color-accent-hover: var(--theme-accent-hover);
  --color-accent-light: var(--theme-accent-light);

  /* Background and surface */
  --color-bg: var(--theme-bg-light);
  --color-surface: var(--theme-surface-light);
  --color-surface-hover: var(--theme-surface-hover-light);

  /* Text colors */
  --color-text: var(--theme-text-light);
  --color-text-muted: var(--theme-text-muted-light);
  --color-text-inverse: var(--theme-text-inverse-light);

  /* Borders and shadows */
  --color-border: var(--theme-border-light);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Status colors */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

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

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
}

/* Dark mode overrides */
[data-mode="dark"] {
  --color-bg: var(--theme-bg-dark);
  --color-surface: var(--theme-surface-dark);
  --color-surface-hover: var(--theme-surface-hover-dark);
  --color-text: var(--theme-text-dark);
  --color-text-muted: var(--theme-text-muted-dark);
  --color-text-inverse: var(--theme-text-inverse-dark);
  --color-border: var(--theme-border-dark);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);

  /* Bootstrap overrides for dark mode */
  --bs-body-color: var(--theme-text-dark);
  --bs-body-bg: var(--theme-bg-dark);
  --bs-secondary-color: var(--theme-text-muted-dark);
  --bs-tertiary-color: var(--theme-text-muted-dark);
  --bs-heading-color: var(--theme-text-dark);
  --bs-link-color: var(--theme-primary);
  --bs-link-hover-color: var(--theme-primary-hover);
  color-scheme: dark;
}