/* ============================================================
   AETHER theme system
   - Semantic CSS variables (DARK is the default)
   - Global remap of NEUTRAL Tailwind utilities onto the tokens
   Brand + status colors (brand-blue, red/green/yellow pills,
   avatar colors) are intentionally NOT remapped.
   ============================================================ */

/* ---- Tokens: dark default (also applied when html.dark) ---- */
:root,
html.dark {
  --surface-base:   #0B1120;
  --surface-1:      #0F172A;
  --surface-2:      #1E293B;
  --surface-3:      #243248;
  --border-subtle:  #1E2A3A;
  --border-strong:  #334155;
  --text-primary:   #F1F5F9;
  --text-secondary: #CBD5E1;
  --text-muted:     #94A3B8;
  --accent:         #0095FF;
  --accent-hover:   #0077CC;
  --accent-contrast:#FFFFFF;
  --accent-ring:    rgba(0, 149, 255, 0.45);
  --accent-soft:    rgba(0, 149, 255, 0.14);
  --success:        #10B981;
  --warning:        #F59E0B;
  --danger:         #EF4444;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow:    0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

/* ---- Light overrides ---- */
html.light {
  --surface-base:   #F8FAFC;
  --surface-1:      #FFFFFF;
  --surface-2:      #F1F5F9;
  --surface-3:      #F1F5F9;
  --border-subtle:  #E5E7EB;
  --border-strong:  #CBD5E1;
  --text-primary:   #0F172A;
  --text-secondary: #475569;
  --text-muted:     #64748B;
  --accent:         #0095FF;
  --accent-hover:   #0077CC;
  --accent-contrast:#FFFFFF;
  --accent-ring:    rgba(0, 149, 255, 0.35);
  --accent-soft:    rgba(0, 149, 255, 0.10);
  --success:        #059669;
  --warning:        #D97706;
  --danger:         #DC2626;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow:    0 4px 14px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 14px 36px rgba(16, 24, 40, 0.12);
  color-scheme: light;
}

/* ---- Page base ---- */
body { color: var(--text-secondary); }

/* ---- Backgrounds (neutrals only) ---- */
.bg-white    { background-color: var(--surface-1) !important; }
.bg-gray-50  { background-color: var(--surface-base) !important; }
.bg-gray-100 { background-color: var(--surface-2) !important; }
.bg-gray-200 { background-color: var(--surface-3) !important; }

/* ---- Text (neutrals only) ---- */
.text-black,
.text-gray-900 { color: var(--text-primary) !important; }
.text-gray-800,
.text-gray-700 { color: var(--text-secondary) !important; }
.text-gray-600,
.text-gray-500,
.text-gray-400 { color: var(--text-muted) !important; }

/* ---- Borders & dividers ---- */
.border-gray-200,
.border-gray-300     { border-color: var(--border-subtle) !important; }
.divide-gray-200 > * { border-color: var(--border-subtle) !important; }
.border-gray-100     { border-color: var(--border-subtle) !important; }
.divide-gray-100 > * { border-color: var(--border-subtle) !important; }

/* ---- Mid-tone neutral surfaces ---- */
.bg-gray-300 { background-color: var(--surface-3) !important; }
/* Small gray-300 dots (e.g. chat typing indicator) are foreground elements,
   not surfaces — keep them visible on dark backgrounds. */
.h-2.w-2.bg-gray-300 { background-color: var(--text-muted) !important; }
.text-gray-300 { color: var(--text-muted) !important; }

/* ---- Hover surfaces ---- */
.hover\:bg-gray-50:hover  { background-color: var(--surface-2) !important; }
.hover\:bg-gray-100:hover { background-color: var(--surface-2) !important; }
.hover\:bg-gray-200:hover { background-color: var(--surface-3) !important; }
.hover\:bg-gray-300:hover { background-color: var(--surface-3) !important; }

/* ---- Elevation (flat shadows vanish on dark; pair with hairline) ---- */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow    { box-shadow: var(--shadow) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }

/* ---- Form controls: dark needs explicit bg/placeholder/option ---- */
html.dark input,
html.dark select,
html.dark textarea {
  background-color: var(--surface-3);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: var(--text-muted); }
html.dark option { background-color: var(--surface-1); color: var(--text-primary); }

/* ---- Scrollbars ---- */
html.dark * { scrollbar-color: var(--border-strong) transparent; }

/* ---- Smooth theme switch ---- */
body,
.bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-gray-300 {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* ============================================================
   Reusable component classes (used by Tasks 2-4)
   ============================================================ */

/* Theme toggle segmented control */
.theme-option {
  transition: background-color .15s ease, color .15s ease;
}
.theme-option-active {
  background-color: var(--accent) !important;
  color: var(--accent-contrast) !important;
}

/* Dark-tuned status pills */
.pill-success { background-color: rgba(16, 185, 129, 0.15); color: var(--success); }
.pill-warning { background-color: rgba(245, 158, 11, 0.15); color: var(--warning); }
.pill-danger  { background-color: rgba(239, 68, 68, 0.15);  color: var(--danger); }

/* Stat-card hover lift */
.card-hover { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--border-strong) !important; }