/* ── Bootstrap v5 variable overrides ──────────────────────────────────────── */
/* Dark theme (default). `:root` so pages without `data-theme` still get it.   */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Primary = violet #8A5CFF */
  --bs-primary:             #8A5CFF;
  --bs-primary-rgb:         138, 92, 255;
  /* Secondary = magenta #FF2FD1 */
  --bs-secondary:           #FF2FD1;
  --bs-secondary-rgb:       255, 47, 209;
  /* Info = cyan #00F0FF */
  --bs-info:                #00F0FF;
  --bs-info-rgb:            0, 240, 255;
  /* Semantic */
  --bs-success:             #34d399;
  --bs-success-rgb:         52, 211, 153;
  --bs-danger:              #fb7185;
  --bs-danger-rgb:          251, 113, 133;
  --bs-warning:             #fbbf24;
  --bs-warning-rgb:         251, 191, 36;
  /* Body */
  --bs-body-bg:             #06080e;
  --bs-body-color:          #eae6f2;
  --bs-body-font-family:    'Inter', system-ui, sans-serif;
  --bs-body-font-size:      0.9375rem;
  --bs-body-line-height:    1.6;
  /* Borders */
  --bs-border-color:        rgba(255, 255, 255, 0.07);
  --bs-border-radius:       8px;
  --bs-border-radius-lg:    16px;
  --bs-border-radius-xl:    24px;
  --bs-border-radius-pill:  9999px;
  /* Card */
  --bs-card-bg:             rgba(255, 255, 255, 0.03);
  --bs-card-border-color:   rgba(255, 255, 255, 0.07);
  --bs-card-cap-bg:         rgba(255, 255, 255, 0.02);
  /* Link */
  --bs-link-color:          #8A5CFF;
  --bs-link-hover-color:    #a07dff;
  --bs-link-color-rgb:      138, 92, 255;
  /* Form / Input */
  --bs-form-control-bg:     rgba(255, 255, 255, 0.05);

  /* ── Radiant tokens (backward compat + Chalie-specific) ───────────────────── */
  --violet:                 #8A5CFF;
  --violet-hover:           #9B6FFF;
  --magenta:                #FF2FD1;
  --cyan:                   #00F0FF;

  --accent-primary:         var(--violet);
  --accent-secondary:       var(--magenta);
  --accent-tertiary:        var(--cyan);
  --bg:                     #06080e;
  --bg-2:                   #0d0f18;
  --bg-surface:             rgba(255, 255, 255, 0.03);
  --bg-surface-2:           rgba(255, 255, 255, 0.05);
  --bg-input:               rgba(255, 255, 255, 0.05);
  --bg-user:                rgba(138, 92, 255, 0.07);
  --bg-chalie:              rgba(255, 255, 255, 0.025);
  --text:                   #eae6f2;
  --text-primary:           #eae6f2;
  --text-secondary:         rgba(234, 230, 242, 0.58);
  --text-muted:             rgba(234, 230, 242, 0.50);
  --text-tertiary:          rgba(234, 230, 242, 0.30);
  --text-subtle:            rgba(234, 230, 242, 0.30);
  --border:                 rgba(255, 255, 255, 0.07);
  --border-subtle:          rgba(255, 255, 255, 0.07);
  --border-strong:          rgba(255, 255, 255, 0.12);
  --success:                #34d399;
  --error:                  #fb7185;
  --warning:                #fbbf24;
  --warning-banner-text:    #e89c50;
  --ease-out:               cubic-bezier(0.16, 1, 0.3, 1);

  /* Effects */
  --shadow-card:            0 1px 0 rgba(255,255,255,0.03) inset, 0 12px 40px rgba(0,0,0,0.35);
  --grain-opacity:          0.04;
  --grain-blend:            overlay;

  /* Ambient orbs (drive the canvas + decorative orbs) */
  --orb-1:                  rgba(138, 92, 255, 0.55);
  --orb-2:                  rgba(255, 47, 209, 0.30);
  --orb-3:                  rgba(0, 240, 255, 0.22);

  /* Surface scrim / dock backdrop — used by fixed bars */
  --scrim-top:              rgba(6, 8, 14, 0.92);
  --scrim-dock:             rgba(6, 8, 14, 0.92);
  --scrim-fallback:         rgba(6, 8, 14, 0.98);

  /* Legacy aliases kept for backward compat */
  --accent:                 var(--violet);
  --accent-hover:           var(--violet-hover);
  --bg-dark:                var(--bg);
  --bg-card:                var(--bg-surface);
}

/* ── Light theme ──────────────────────────────────────────────────────────────
   Mirrors the dark token system. Violet stays primary (nudged for AA on
   light), warm paper background (never pure white), softer ambient orbs
   blended via `multiply` so they tint the page rather than glow on it. */
[data-theme="light"] {
  color-scheme: light;

  /* Bootstrap */
  --bs-primary:             #6E3DEB;
  --bs-primary-rgb:         110, 61, 235;
  --bs-secondary:           #DB1FAF;
  --bs-secondary-rgb:       219, 31, 175;
  --bs-info:                #0098A8;
  --bs-info-rgb:            0, 152, 168;
  --bs-success:             #0F9D6E;
  --bs-success-rgb:         15, 157, 110;
  --bs-danger:              #DC3654;
  --bs-danger-rgb:          220, 54, 84;
  --bs-warning:             #B47B00;
  --bs-warning-rgb:         180, 123, 0;
  --bs-body-bg:             #F6F4F1;
  --bs-body-color:          #1A1626;
  --bs-border-color:        rgba(26, 22, 38, 0.08);
  --bs-card-bg:             rgba(255, 255, 255, 0.72);
  --bs-card-border-color:   rgba(26, 22, 38, 0.08);
  --bs-card-cap-bg:         rgba(255, 255, 255, 0.55);
  --bs-link-color:          #6E3DEB;
  --bs-link-hover-color:    #5B2DD8;
  --bs-link-color-rgb:      110, 61, 235;
  --bs-form-control-bg:     rgba(255, 255, 255, 0.88);

  /* Radiant tokens */
  --violet:                 #6E3DEB;
  --violet-hover:           #5B2DD8;
  --magenta:                #DB1FAF;
  --cyan:                   #0098A8;

  --accent-primary:         var(--violet);
  --accent-secondary:       var(--magenta);
  --accent-tertiary:        var(--cyan);
  --bg:                     #F6F4F1;
  --bg-2:                   #FFFFFF;
  --bg-surface:             rgba(255, 255, 255, 0.72);
  --bg-surface-2:           rgba(255, 255, 255, 0.92);
  --bg-input:               rgba(255, 255, 255, 0.88);
  --bg-user:                rgba(110, 61, 235, 0.07);
  --bg-chalie:              rgba(255, 255, 255, 0.65);
  --text:                   #1A1626;
  --text-primary:           #1A1626;
  --text-secondary:         rgba(26, 22, 38, 0.62);
  --text-muted:             rgba(26, 22, 38, 0.50);
  --text-tertiary:          rgba(26, 22, 38, 0.34);
  --text-subtle:            rgba(26, 22, 38, 0.34);
  --border:                 rgba(26, 22, 38, 0.08);
  --border-subtle:          rgba(26, 22, 38, 0.08);
  --border-strong:          rgba(26, 22, 38, 0.14);
  --success:                #0F9D6E;
  --error:                  #DC3654;
  --warning:                #B47B00;
  --warning-banner-text:    #8B5E00;

  /* Effects */
  --shadow-card:            none;
  --grain-opacity:          0.035;
  --grain-blend:            multiply;

  /* Ambient orbs — softer, more pastel on light */
  --orb-1:                  rgba(138, 92, 255, 0.28);
  --orb-2:                  rgba(255, 47, 209, 0.18);
  --orb-3:                  rgba(0, 200, 220, 0.18);

  /* Surface scrims react to the warm paper bg */
  --scrim-top:              rgba(246, 244, 241, 0.88);
  --scrim-dock:             rgba(246, 244, 241, 0.92);
  --scrim-fallback:         rgba(246, 244, 241, 0.98);

  --accent-hover:           var(--violet-hover);
  --bg-dark:                var(--bg);
  --bg-card:                var(--bg-surface);
}

/* ── Base resets ──────────────────────────────────────────────────────────── */
body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  transition: background-color 420ms ease, color 420ms ease;
}

/* ── JS-coupled class aliases (cannot be renamed in JS) ───────────────────── */
.hidden       { display: none !important; }
.form-group   { margin-bottom: 1rem; }
.tab-panel    { display: none; }
.tab-panel.active { display: block; }

/* ── Bootstrap component dark-theme overrides ─────────────────────────────── */

/* Forms */
.form-control,
.form-select {
  background-color: var(--bg-input);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
.form-control:focus,
.form-select:focus {
  background-color: var(--bg-input);
  border-color: rgba(138, 92, 255, 0.45);
  color: var(--bs-body-color);
  box-shadow: 0 0 0 3px rgba(138, 92, 255, 0.12);
}
.form-control::placeholder { color: var(--text-secondary); }
.form-label { color: var(--bs-body-color); font-size: 0.8125rem; font-weight: 600; }

/* Inputs / textareas inherit dark bg */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="datetime-local"],
input[type="time"],
textarea,
select {
  background-color: var(--bg-input);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  color: var(--bs-body-color);
}
input::placeholder,
textarea::placeholder { color: var(--text-secondary); }

/* Buttons */
.btn-primary {
  --bs-btn-bg:              #8A5CFF;
  --bs-btn-border-color:    #8A5CFF;
  --bs-btn-hover-bg:        #9B6FFF;
  --bs-btn-hover-border-color: #9B6FFF;
  --bs-btn-active-bg:       #7a4eee;
  --bs-btn-disabled-bg:     #8A5CFF;
  --bs-btn-color:           #fff;
  --bs-btn-hover-color:     #fff;
}
.btn-secondary {
  --bs-btn-bg:              rgba(255, 255, 255, 0.05);
  --bs-btn-border-color:    rgba(255, 255, 255, 0.07);
  --bs-btn-hover-bg:        rgba(255, 255, 255, 0.09);
  --bs-btn-hover-border-color: rgba(138, 92, 255, 0.3);
  --bs-btn-color:           var(--bs-body-color);
  --bs-btn-hover-color:     var(--bs-body-color);
  --bs-btn-active-bg:       rgba(255, 255, 255, 0.08);
}
.btn-danger {
  --bs-btn-bg:              transparent;
  --bs-btn-border-color:    rgba(251, 113, 133, 0.30);
  --bs-btn-hover-bg:        rgba(251, 113, 133, 0.10);
  --bs-btn-hover-border-color: rgba(251, 113, 133, 0.55);
  --bs-btn-active-bg:       rgba(251, 113, 133, 0.15);
  --bs-btn-color:           #fb7185;
  --bs-btn-hover-color:     #fb7185;
  --bs-btn-disabled-bg:     transparent;
  --bs-btn-disabled-color:  rgba(251, 113, 133, 0.45);
}
.btn-outline-primary {
  --bs-btn-color:           #8A5CFF;
  --bs-btn-border-color:    #8A5CFF;
  --bs-btn-hover-bg:        rgba(138, 92, 255, 0.15);
  --bs-btn-hover-color:     #8A5CFF;
}

/* Cards */
.card {
  background-color: var(--bg-surface);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
.card-header,
.card-footer {
  background-color: var(--bs-card-cap-bg);
  border-color: var(--bs-border-color);
}

/* Modals */
.modal-content {
  background-color: var(--bg-2);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
.modal-header,
.modal-footer {
  border-color: var(--bs-border-color);
}
.modal-backdrop.show { opacity: 0.75; }

/* Badges */
.badge.bg-primary   { background-color: rgba(var(--bs-primary-rgb), 0.18) !important; color: var(--accent-primary); }
.badge.bg-secondary { background-color: rgba(var(--bs-secondary-rgb), 0.14) !important; color: var(--accent-secondary); }
.badge.bg-info      { background-color: rgba(var(--bs-info-rgb), 0.12) !important;  color: var(--accent-tertiary); }
.badge.bg-success   { background-color: rgba(var(--bs-success-rgb), 0.14) !important; color: var(--success); }
.badge.bg-danger    { background-color: rgba(var(--bs-danger-rgb), 0.14) !important; color: var(--error); }
.badge.bg-warning   { background-color: rgba(var(--bs-warning-rgb), 0.14) !important;  color: var(--warning); }

/* Alerts */
.alert { border-radius: var(--bs-border-radius); }
.alert-primary   { background-color: rgba(var(--bs-primary-rgb), 0.12); border-color: rgba(var(--bs-primary-rgb), 0.3); color: var(--accent-primary); }
.alert-info      { background-color: rgba(var(--bs-info-rgb), 0.08);  border-color: rgba(var(--bs-info-rgb), 0.25); color: var(--accent-tertiary); }
.alert-success   { background-color: rgba(var(--bs-success-rgb), 0.10); border-color: rgba(var(--bs-success-rgb), 0.3); color: var(--success); }
.alert-danger    { background-color: rgba(var(--bs-danger-rgb), 0.10); border-color: rgba(var(--bs-danger-rgb), 0.3); color: var(--error); }
.alert-warning   { background-color: rgba(var(--bs-warning-rgb), 0.10);  border-color: rgba(var(--bs-warning-rgb), 0.3);  color: var(--warning); }

/* Spinners */
.spinner-border { color: var(--bs-primary); }

/* Tables */
.table         { --bs-table-color: var(--bs-body-color); --bs-table-border-color: var(--bs-border-color); }
.table-dark    { --bs-table-bg: rgba(255, 255, 255, 0.03); }
.table-striped { --bs-table-striped-bg: rgba(255, 255, 255, 0.02); }

/* Nav tabs */
.nav-tabs {
  border-color: var(--bs-border-color);
}
.nav-tabs .nav-link {
  color: var(--text-secondary);
  border-color: transparent;
}
.nav-tabs .nav-link:hover {
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}
.nav-tabs .nav-link.active {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: var(--bs-border-color) var(--bs-border-color) transparent;
  color: var(--bs-body-color);
}

/* Dropdowns */
.dropdown-menu {
  background-color: var(--bg-2);
  border-color: var(--bs-border-color);
}
.dropdown-item { color: var(--bs-body-color); }
.dropdown-item:hover, .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--bs-body-color);
}
.dropdown-divider { border-color: var(--bs-border-color); }

/* Accordion */
.accordion-item {
  background-color: var(--bg-surface);
  border-color: var(--bs-border-color);
}
.accordion-button {
  background-color: var(--bg-surface);
  color: var(--bs-body-color);
}
.accordion-button:not(.collapsed) {
  background-color: rgba(138, 92, 255, 0.08);
  color: #8A5CFF;
  box-shadow: inset 0 -1px 0 var(--bs-border-color);
}
.accordion-button::after {
  filter: invert(1) brightness(0.7);
}

/* Toast */
.toast {
  background-color: var(--bg-2);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
.toast-header {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

/* Scrollbar */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: rgba(255, 255, 255, 0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.08); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.15); }