:root {
  /* Core Color Palette */
  --color-base-white: #F8FAFC;        /* Off-white base */
  --color-base-blue: #3B82F6;         /* Primary blue */
  --color-base-green: #7EBCA8;        /* Soft green */
  --color-base-gray: #548AAF;         /* Deep gray-blue */

  /* Primary colors */
  --primary-color: var(--color-base-gray);
  --primary-light: #60A5FA;
  --primary-dark: #2563EB;
  
  /* Secondary colors */
  --secondary-color: var(--color-base-green);
  --secondary-light: #92CCB9;
  --secondary-dark: #6BA994;
  
  /* Accent colors */
  --accent-color: var(--color-base-green);
  --accent-light: #92CCB9;
  --accent-dark: #6BA994;
  --accent-accessible: #5A9B84;  /* Darker green for WCAG AA compliance with white text */
  
  /* Background colors */
  --background-color: var(--color-base-white);
  --background-secondary: #F1F5F9;
  --background-muted: #E2E8F0;
  
  /* Text colors */
  --text-color: var(--color-base-gray);
  --text-secondary: #5A6F84;  /* Darkened from #6B839A for WCAG AA compliance */
  --text-muted: #6B7D8F;      /* Darkened from #8B9FB5 for WCAG AA compliance */
  --text-light: var(--color-base-white);
  
  /* Border colors */
  --border-color: #CBD5E1;
  --border-secondary: #E2E8F0;
  
  /* Status colors */
  --success-color: var(--color-base-green);
  --error-color: #EF4444;
  --warning-color: #F59E0B;
  --info-color: var(--color-base-blue);
  
  /* Dark theme overrides */
  --dark-background: #1F2937;
  --dark-background-secondary: #111827;
  --dark-text: var(--color-base-white);
  --dark-text-secondary: #E5E7EB;
  --dark-border: #374151;
}

/* Dark mode */
[data-theme="dark"] {
  --background-color: var(--dark-background);
  --background-secondary: var(--dark-background-secondary);
  --text-color: var(--dark-text);
  --text-secondary: var(--dark-text-secondary);
  --border-color: var(--dark-border);
}

/* Legacy color mappings for compatibility */
.color-primary { color: var(--primary-color); }
.color-secondary { color: var(--secondary-color); }
.color-accent { color: var(--accent-color); }

.bg-primary { background-color: var(--primary-color); }
.bg-secondary { background-color: var(--secondary-color); }
.bg-accent { background-color: var(--accent-color); }

/* Gradients */
.gradient-primary {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
}

.gradient-secondary {
  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-light) 100%);
}