/* ==========================================================================
   ElixerPro Design System - Theme Variables
   Color Palette: Deep charcoal/navy, controlled violet, warm white, slate neutrals
   WCAG AA/AAA Accessible contrast throughout
   ========================================================================== */

:root {
  /* Dark Theme (Default) */
  --bg-primary: #0A0D14;
  --bg-secondary: #111622;
  --bg-tertiary: #171E2D;
  --bg-elevated: #1D2638;
  --bg-input: #121824;
  --bg-input-focus: #182030;
  
  --border-subtle: #222C40;
  --border-medium: #2F3D57;
  --border-focus: #7C3AED;
  --border-accent: rgba(124, 58, 237, 0.4);

  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --text-on-accent: #FFFFFF;

  --accent-primary: #7C3AED;
  --accent-hover: #6D28D9;
  --accent-active: #5B21B6;
  --accent-light: rgba(124, 58, 237, 0.12);
  --accent-glow: rgba(124, 58, 237, 0.25);
  --accent-border: rgba(124, 58, 237, 0.3);

  --accent-secondary: #38BDF8;
  --accent-secondary-light: rgba(56, 189, 248, 0.12);

  --success: #10B981;
  --success-light: rgba(16, 185, 129, 0.12);
  --warning: #F59E0B;
  --danger: #EF4444;

  --card-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.35);
  --card-hover-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(124, 58, 237, 0.2);
  --dropdown-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  --modal-backdrop: rgba(5, 8, 14, 0.8);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Spacing Scale */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Border Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Light Theme */
[data-theme="light"] {
  --bg-primary: #FAFAFB;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F1F4F9;
  --bg-elevated: #FFFFFF;
  --bg-input: #FFFFFF;
  --bg-input-focus: #F8FAFC;

  --border-subtle: #E2E8F0;
  --border-medium: #CBD5E1;
  --border-focus: #6D28D9;
  --border-accent: rgba(109, 40, 217, 0.35);

  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #64748B;
  --text-on-accent: #FFFFFF;

  --accent-primary: #6D28D9;
  --accent-hover: #5B21B6;
  --accent-active: #4C1D95;
  --accent-light: rgba(109, 40, 217, 0.08);
  --accent-glow: rgba(109, 40, 217, 0.16);
  --accent-border: rgba(109, 40, 217, 0.25);

  --accent-secondary: #0284C7;
  --accent-secondary-light: rgba(2, 132, 199, 0.08);

  --success: #059669;
  --success-light: rgba(5, 150, 105, 0.1);
  --warning: #D97706;
  --danger: #DC2626;

  --card-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05);
  --card-hover-shadow: 0 16px 36px -6px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(109, 40, 217, 0.25);
  --dropdown-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  --modal-backdrop: rgba(15, 23, 42, 0.5);
}