/*
  Theme system: `data-theme-resolved` (light|dark) is computed and set by
  theme-switcher.js from the user's chosen mode (light/dark/auto — stored
  in `data-theme-mode` + cookie/localStorage). The accent color is applied
  as a single CSS custom property (--accent) so the color picker can set
  unlimited colors without touching this stylesheet.
*/

:root {
  /* Without this, browsers guess the native rendering scheme for unstyled/partially-styled
     form controls (checkboxes, the Bootstrap .form-switch toggles, scrollbars) independently
     of our own data-theme-resolved attribute — on some browsers/OSes that guess conflicts
     with Bootstrap's custom switch styling and renders it as an oversized native control
     instead of the small custom pill. Declaring it explicitly per theme removes the guess. */
  color-scheme: light;

  --accent: #4f46e5;
  --accent-rgb: 79, 70, 229;

  --bg-body: #f7f8fb;
  --bg-surface: #ffffff;
  --bg-surface-alt: #f1f2f6;
  --text-primary: #1a1d29;
  --text-muted: #475569;
  --border-color: #e6e8ef;
  --card-border-color: #ced3e0;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);
  --header-bg: rgba(255, 255, 255, 0.85);
}

html[data-theme-resolved="dark"] {
  color-scheme: dark;

  --bg-body: #0f1117;
  --bg-surface: #171a23;
  --bg-surface-alt: #1e222d;
  --text-primary: #f1f2f6;
  --text-muted: #aeb4c6;
  --border-color: #2a2e3a;
  --card-border-color: #3a3f4e;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
  --header-bg: rgba(23, 26, 35, 0.85);
}

body {
  background: var(--bg-body);
  color: var(--text-primary);
  transition: background-color .25s ease, color .25s ease;
}

.text-muted { color: var(--text-muted) !important; }

.text-primary, .btn-primary, .bg-primary { color: var(--accent) !important; }
.btn-primary {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
  filter: brightness(0.92);
  color: #fff !important;
}
.btn-outline-primary {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.btn-outline-primary:hover {
  background-color: var(--accent) !important;
  color: #fff !important;
}
a { color: var(--accent); }
.bg-primary { background-color: var(--accent) !important; }

.color-swatch {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--border-color);
  cursor: pointer; padding: 0; display: inline-flex;
  align-items: center; justify-content: center; font-size: 14px; line-height: 1;
  color: var(--text-muted); background-clip: padding-box;
}
.color-swatch-custom { background: var(--bg-surface-alt); position: relative; overflow: hidden; }
.color-swatch-custom input[type="color"] { position:absolute; inset:0; opacity:0; cursor:pointer; }

.theme-mode-btn {
  border: 1px solid var(--border-color);
  background: var(--bg-surface-alt);
  color: var(--text-primary);
}
.theme-mode-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}