/* Theme: Blue - Light & Dark Modes */
/* Based on Tailwind's Blue color palette */

:root {
  /* Primary Color Palette - Blue */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
  --color-primary-950: #172554;

  /* Semantic Primary Colors */
  --color-primary: var(--color-primary-600);
  --color-primary-hover: var(--color-primary-800);
  --color-primary-active: var(--color-primary-800);
  --color-primary-light: var(--color-primary-500);
  --color-primary-lighter: var(--color-primary-400);
  --color-primary-dark: var(--color-primary-700);
  --color-primary-darker: var(--color-primary-800);

  /* Secondary Color Palette - Slate */
  --color-secondary-50: #f8fafc;
  --color-secondary-100: #f1f5f9;
  --color-secondary-200: #e2e8f0;
  --color-secondary-300: #cbd5e1;
  --color-secondary-400: #94a3b8;
  --color-secondary-500: #64748b;
  --color-secondary-600: #475569;
  --color-secondary-700: #334155;
  --color-secondary-800: #1e293b;
  --color-secondary-900: #0f172a;
  --color-secondary-950: #020617;

  /* Semantic Secondary Colors */
  --color-secondary: var(--color-secondary-500);
  --color-secondary-hover: var(--color-secondary-600);
  --color-secondary-active: var(--color-secondary-700);
  --color-secondary-light: var(--color-secondary-400);
  --color-secondary-lighter: var(--color-secondary-300);
  --color-secondary-dark: var(--color-secondary-600);
  --color-secondary-darker: var(--color-secondary-700);

  /* Background Colors */
  --color-background: #ffffff;
  --color-background-alt: var(--color-secondary-50);
  --color-surface: var(--color-secondary-50);
  --color-surface-elevated: #ffffff;
  --color-surface-hover: var(--color-secondary-100);
  --color-surface-active: var(--color-secondary-200);

  /* Text Colors */
  --color-text: var(--color-secondary-900);
  --color-text-secondary: var(--color-secondary-700);
  --color-text-muted: var(--color-secondary-500);
  --color-text-disabled: var(--color-secondary-400);
  --color-text-inverse: #ffffff;
  --color-text-on-primary: #ffffff;
  --color-text-on-secondary: #ffffff;

  /* Border Colors */
  --color-border: var(--color-secondary-200);
  --color-border-light: var(--color-secondary-100);
  --color-border-strong: var(--color-secondary-300);
  --color-border-focus: var(--color-primary-500);
  --color-border-error: #ef4444;
  --color-border-success: #10b981;
  --color-border-warning: #f59e0b;

  /* Accent Colors */
  --color-accent: #0ea5e9;
  --color-accent-hover: #0284c7;
  --color-accent-active: #0369a1;

  /* Status Colors */
  --color-success: #10b981;
  --color-success-light: #d1fae5;
  --color-success-dark: #047857;
  --color-error: #ef4444;
  --color-error-light: #fee2e2;
  --color-error-dark: #dc2626;
  --color-warning: #f59e0b;
  --color-warning-light: #fef3c7;
  --color-warning-dark: #d97706;
  --color-info: #3b82f6;
  --color-info-light: #dbeafe;
  --color-info-dark: #1d4ed8;

  /* Shadow Colors */
  --color-shadow: rgba(0, 0, 0, 0.1);
  --color-shadow-strong: rgba(0, 0, 0, 0.25);
  --color-shadow-light: rgba(0, 0, 0, 0.05);

  /* Overlay Colors */
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-overlay-light: rgba(0, 0, 0, 0.25);
  --color-overlay-strong: rgba(0, 0, 0, 0.75);
}

/* Dark Theme Overrides */
[data-theme="dark"] {
  /* Primary Color Palette (adjusted for dark theme) */
  --color-primary: var(--color-primary-500);
  --color-primary-hover: var(--color-primary-300);
  --color-primary-active: var(--color-primary-300);
  --color-primary-light: var(--color-primary-400);
  --color-primary-lighter: var(--color-primary-300);
  --color-primary-dark: var(--color-primary-600);
  --color-primary-darker: var(--color-primary-700);

  /* Secondary Colors (inverted for dark theme) */
  --color-secondary: var(--color-secondary-400);
  --color-secondary-hover: var(--color-secondary-300);
  --color-secondary-active: var(--color-secondary-200);
  --color-secondary-light: var(--color-secondary-300);
  --color-secondary-lighter: var(--color-secondary-200);
  --color-secondary-dark: var(--color-secondary-500);
  --color-secondary-darker: var(--color-secondary-600);

  /* Background Colors */
  --color-background: var(--color-secondary-900);
  --color-background-alt: var(--color-secondary-950);
  --color-surface: var(--color-secondary-800);
  --color-surface-elevated: var(--color-secondary-700);
  --color-surface-hover: var(--color-secondary-700);
  --color-surface-active: var(--color-secondary-600);

  /* Text Colors */
  --color-text: #ffffff;
  --color-text-secondary: var(--color-secondary-300);
  --color-text-muted: var(--color-secondary-400);
  --color-text-disabled: var(--color-secondary-500);
  --color-text-inverse: var(--color-secondary-900);
  --color-text-on-primary: #ffffff;
  --color-text-on-secondary: #ffffff;

  /* Border Colors */
  --color-border: var(--color-secondary-700);
  --color-border-light: var(--color-secondary-800);
  --color-border-strong: var(--color-secondary-600);
  --color-border-focus: var(--color-primary-400);
  --color-border-error: #f87171;
  --color-border-success: #34d399;
  --color-border-warning: #fbbf24;

  /* Accent Colors */
  --color-accent: #38bdf8;
  --color-accent-hover: #0ea5e9;
  --color-accent-active: #0284c7;

  /* Status Colors (adjusted for dark theme) */
  --color-success: #34d399;
  --color-success-light: rgba(52, 211, 153, 0.1);
  --color-success-dark: #10b981;
  --color-error: #f87171;
  --color-error-light: rgba(248, 113, 113, 0.1);
  --color-error-dark: #ef4444;
  --color-warning: #fbbf24;
  --color-warning-light: rgba(251, 191, 36, 0.1);
  --color-warning-dark: #f59e0b;
  --color-info: #60a5fa;
  --color-info-light: rgba(96, 165, 250, 0.1);
  --color-info-dark: #3b82f6;

  /* Shadow Colors */
  --color-shadow: rgba(0, 0, 0, 0.3);
  --color-shadow-strong: rgba(0, 0, 0, 0.5);
  --color-shadow-light: rgba(0, 0, 0, 0.1);

  /* Overlay Colors */
  --color-overlay: rgba(0, 0, 0, 0.7);
  --color-overlay-light: rgba(0, 0, 0, 0.4);
  --color-overlay-strong: rgba(0, 0, 0, 0.9);
}