/* Theme: Brain Stem - Dark Blue on White */
/* Professional light theme with blue accents */
/* Updated: 2025-01-23 */

:root {
  /* ============================================
     Brand Colors (RGB format for alpha support)
     Usage: rgb(var(--color-primary)) or rgba(var(--color-primary), 0.5)
     ============================================ */
  --color-primary: 30, 58, 95;              /* #1e3a5f - professional dark blue */
  --color-primary-dark: 21, 42, 69;         /* #152a45 - darker blue */
  --color-primary-light: 44, 82, 130;       /* #2c5282 - lighter blue */
  --color-secondary: 44, 82, 130;           /* #2c5282 - secondary blue */
  --color-secondary-dark: 30, 58, 95;       /* #1e3a5f */
  --color-secondary-light: 59, 130, 246;    /* #3b82f6 */
  --color-accent: 148, 163, 184;            /* #94a3b8 - slate accent */

  /* ============================================
     Semantic Colors
     ============================================ */
  --color-success: 34, 197, 94;             /* #22c55e */
  --color-error: 220, 38, 38;               /* #dc2626 */
  --color-warning: 245, 158, 11;            /* #f59e0b */
  --color-info: 59, 130, 246;               /* #3b82f6 */

  /* ============================================
     Background & Surface Colors (Light Theme)
     ============================================ */
  --color-background: 255, 255, 255;        /* #ffffff - pure white */
  --color-background-alt: 248, 250, 252;    /* #f8fafc - slightly off-white */
  --color-surface: 241, 245, 249;           /* #f1f5f9 - light gray cards */
  --color-surface-elevated: 226, 232, 240;  /* #e2e8f0 - elevated elements */
  --color-surface-hover: 203, 213, 225;     /* #cbd5e1 - hover states */

  /* ============================================
     Text Colors (Dark on Light)
     ============================================ */
  --color-text: 30, 41, 59;                 /* #1e293b - primary dark text */
  --color-text-secondary: 100, 116, 139;    /* #64748b - secondary gray */
  --color-text-muted: 148, 163, 184;        /* #94a3b8 - muted text */
  --color-text-disabled: 203, 213, 225;     /* #cbd5e1 - disabled text */

  /* ============================================
     Border Colors
     ============================================ */
  --color-border: 30, 58, 95;               /* base for rgba borders */
  --color-border-muted: 226, 232, 240;      /* #e2e8f0 - subtle borders */
  --color-border-light: 241, 245, 249;      /* #f1f5f9 - lighter borders */
  --border-opacity: 0.15;                   /* default border opacity */

  /* ============================================
     Interactive States
     ============================================ */
  --color-focus-ring: 30, 58, 95;           /* matches primary */
  --color-selection-bg: 30, 58, 95;         /* text selection */
  --color-selection-text: 255, 255, 255;    /* white text on selection */

  /* ============================================
     Gradients
     ============================================ */
  --gradient-primary: linear-gradient(135deg, rgb(var(--color-primary)) 0%, rgb(var(--color-secondary)) 100%);
  --gradient-text: linear-gradient(135deg, rgb(var(--color-primary)) 0%, rgb(var(--color-secondary)) 100%);
  --gradient-surface: linear-gradient(180deg, rgba(var(--color-surface), 1) 0%, rgba(var(--color-background), 1) 100%);
  --gradient-glow: radial-gradient(ellipse at center, rgba(var(--color-primary), 0.08) 0%, transparent 70%);
  --gradient-hero: radial-gradient(50% 50% at 50% 50%, rgba(var(--color-primary), 0.08) 0%, transparent 100%);
  --gradient-mesh: conic-gradient(from 180deg at 50% 50%, rgba(var(--color-primary), 0.03) 0deg, rgba(var(--color-secondary), 0.02) 120deg, transparent 240deg);
  --gradient-radial-subtle: radial-gradient(398.67% 100% at 50% 100%, rgba(var(--color-primary), 0.1) 0%, transparent 100%);
  --gradient-cta: linear-gradient(180deg, transparent 0%, rgba(var(--color-primary), 0.03) 100%);

  /* ============================================
     Shadows (light theme - softer, blue-tinted)
     ============================================ */
  --shadow-xs: 0 1px 2px rgba(30, 58, 95, 0.05);
  --shadow-sm: 0 1px 3px rgba(30, 58, 95, 0.08), 0 1px 2px rgba(30, 58, 95, 0.04);
  --shadow-md: 0 4px 6px rgba(30, 58, 95, 0.1), 0 2px 4px rgba(30, 58, 95, 0.06);
  --shadow-lg: 0 10px 15px rgba(30, 58, 95, 0.12), 0 4px 6px rgba(30, 58, 95, 0.08);
  --shadow-xl: 0 20px 25px rgba(30, 58, 95, 0.15), 0 8px 10px rgba(30, 58, 95, 0.1);
  --shadow-2xl: 0 25px 50px rgba(30, 58, 95, 0.2);
  --shadow-inner: inset 0 2px 4px rgba(30, 58, 95, 0.06);

  /* Glow shadows (subtle for light theme) */
  --shadow-glow-sm: 0 0 10px rgba(var(--color-primary), 0.08);
  --shadow-glow: 0 0 20px rgba(var(--color-primary), 0.12);
  --shadow-glow-lg: 0 0 40px rgba(var(--color-primary), 0.15);
  --shadow-glow-secondary: 0 0 20px rgba(var(--color-secondary), 0.12);

  /* Button shadows */
  --shadow-button: 0 4px 20px rgba(30, 58, 95, 0.25);
  --shadow-button-hover: 0 6px 30px rgba(30, 58, 95, 0.35);
  --shadow-button-large: 0 6px 30px rgba(30, 58, 95, 0.3);
  --shadow-button-large-hover: 0 10px 40px rgba(30, 58, 95, 0.4);

  /* Card shadows */
  --shadow-card: 0 4px 6px rgba(30, 58, 95, 0.08);
  --shadow-card-hover: 0 10px 30px rgba(30, 58, 95, 0.15);

  /* ============================================
     Overlay Colors (light theme uses white overlay)
     ============================================ */
  --color-overlay: 255, 255, 255;
  --overlay-opacity-light: 0.7;
  --overlay-opacity-medium: 0.85;
  --overlay-opacity-heavy: 0.95;

  /* ============================================
     Scrollbar Colors
     ============================================ */
  --scrollbar-track: rgb(var(--color-surface));
  --scrollbar-thumb: rgba(var(--color-primary), 0.2);
  --scrollbar-thumb-hover: rgba(var(--color-primary), 0.35);

  /* ============================================
     Code/Syntax Highlighting (light theme)
     ============================================ */
  --color-code-bg: 248, 250, 252;
  --color-code-text: 30, 41, 59;
  --color-code-keyword: 124, 58, 237;       /* purple */
  --color-code-string: 5, 150, 105;         /* green */
  --color-code-comment: 107, 114, 128;      /* gray */
  --color-code-function: 217, 119, 6;       /* orange */

  /* ============================================
     Form Colors
     ============================================ */
  --color-input-bg: 255, 255, 255;
  --color-input-border: 226, 232, 240;
  --color-input-focus-border: var(--color-primary);
  --color-input-placeholder: 148, 163, 184;
  --color-input-disabled-bg: 241, 245, 249;

  /* ============================================
     Link Action Color (for dashboard/admin links)
     ============================================ */
  --color-action: 30, 58, 95;               /* matches primary for consistency */
}

/* ============================================
   Light theme utility classes
   ============================================ */

/* Text selection styling */
::selection {
  background: rgba(var(--color-selection-bg), 0.2);
  color: rgb(var(--color-text));
}

/* Custom scrollbar for light theme */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* ============================================
   Navigation Overrides for Light Theme
   ============================================ */
.nav-links a {
  text-shadow: none;
  color: rgb(var(--color-text-secondary));
  font-weight: 600;
}

.nav-links a:hover {
  color: rgb(var(--color-primary));
}

.nav-links a.active {
  color: rgb(var(--color-primary));
}

/* Auth button text shadow removal */
.auth-btn {
  text-shadow: none;
}

/* Card hover adjustments for light theme */
.card:hover {
  box-shadow: var(--shadow-card-hover);
}

/* Modal overlay for light theme */
.modal-overlay {
  background: rgba(var(--color-overlay), 0.9);
}