/*
 * Theme tokens — the single source of truth for every color in the app.
 *
 * The active theme is set on <html data-bs-theme="light|dark"> by
 * templates/partials/_theme_head.html (saved choice, else OS preference).
 * Bootstrap 5.3 reads the same attribute, so its components follow along.
 *
 * Rules (see docs/THEMING.md for the full hex → token mapping):
 *   - Never hardcode a color in a template or stylesheet; use a token below.
 *   - Dark-only tweaks go under [data-bs-theme="dark"], never
 *     @media (prefers-color-scheme: dark) or body.dark-mode.
 *   - Text sitting on a colored fill (buttons, badges, gradient headers)
 *     uses --text-on-accent, which stays white in both themes.
 */

:root,
[data-bs-theme="light"] {
  /* Brand */
  --primary-color: #2d69ff;
  --primary-light: #5a8cff;
  --primary-dark: #1a4fd6;
  --primary-50: #e0f0ff;
  --primary-100: #c0dfff;
  --primary-muted: var(--primary-50);
  --accent-color: #ff5e25;
  --accent-light: #ff7a4d;
  --accent-dark: #e04a15;
  --secondary-color: #64748b;
  --purple-color: #7c3aed;
  --purple-50: #f3e8ff;
  --gradient-purple-start: #667eea;
  --gradient-purple-end: #764ba2;

  /* Surfaces */
  --background-color: #f8fafc;
  --background-secondary: #f1f5f9;
  --surface-color: #ffffff;
  --surface-elevated: #ffffff;
  --surface-muted: #f8fafc;
  --surface-hover: #f1f5f9;
  --surface-active: #e2e8f0;
  --glass-effect: rgba(255, 255, 255, 0.9);
  --overlay-color: rgba(15, 23, 42, 0.5);

  /* Text */
  --text-primary: #070f23;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  --text-muted: #94a3b8;
  --text-inverse: #ffffff;
  --text-on-accent: #ffffff;
  --text-on-warning: #212529;
  --link-color: var(--primary-color);
  --tooltip-bg: #1e293b;
  --tooltip-fg: #ffffff;
  --terminal-bg: #1e1e1e;
  --terminal-text: #d4d4d4;
  --email-canvas: #ffffff;

  /* Borders */
  --border-light: #f1f5f9;
  --border-color: #e2e8f0;
  --border-strong: #cbd5e1;

  /* Status: base (icons, solid fills), bg (tinted panel), text (on tint), border */
  --success-color: #059669;
  --success-light: #10b981;
  --success-50: #ecfdf5;
  --success-bg: #d1fae5;
  --success-text: #065f46;
  --success-border: #a7f3d0;

  --warning-color: #ff5e25;
  --warning-light: #ff7a4d;
  --warning-50: #fff4f0;
  --warning-accent: #f59e0b;
  --warning-bg: #fef3c7;
  --warning-text: #92400e;
  --warning-border: #fde68a;

  --danger-color: #dc2626;
  --danger-light: #ef4444;
  --danger-50: #fef2f2;
  --danger-bg: #fee2e2;
  --danger-text: #991b1b;
  --danger-border: #fecaca;

  --info-color: #2d69ff;
  --info-light: #5a8cff;
  --info-50: #e0f0ff;
  --info-bg: #dbeafe;
  --info-text: #1e40af;
  --info-border: #bfdbfe;

  --neutral-bg: #f1f5f9;
  --neutral-text: #475569;

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-colored: 0 4px 6px -1px rgb(79 70 229 / 0.1), 0 2px 4px -2px rgb(79 70 229 / 0.1);
  --focus-ring: 0 0 0 3px rgb(45 105 255 / 0.25);

  /* Bootstrap 5.3 bridge */
  --bs-body-bg: var(--surface-color);
  --bs-body-color: var(--text-primary);
  --bs-secondary-color: var(--text-tertiary);
  --bs-secondary-bg: var(--surface-hover);
  --bs-tertiary-bg: var(--surface-muted);
  --bs-border-color: var(--border-color);
  --bs-emphasis-color: var(--text-primary);
  --bs-heading-color: inherit;
  --bs-link-color: var(--link-color);
  --bs-link-hover-color: var(--primary-dark);
}

[data-bs-theme="dark"] {
  --primary-color: #3b74ff;
  --primary-light: #7aa2ff;
  --primary-dark: #2d69ff;
  --primary-50: rgba(79, 131, 255, 0.16);
  --primary-100: rgba(79, 131, 255, 0.28);
  --accent-color: #ff7a4d;
  --accent-light: #ff9670;
  --accent-dark: #ff5e25;
  --secondary-color: #64748b;
  --purple-color: #a78bfa;
  --purple-50: rgba(167, 139, 250, 0.16);
  --gradient-purple-start: #5a67d8;
  --gradient-purple-end: #6b46a0;

  --background-color: #0f172a;
  --background-secondary: #1e293b;
  --surface-color: #1e293b;
  --surface-elevated: #273449;
  --surface-muted: #172133;
  --surface-hover: #273449;
  --surface-active: #334155;
  --glass-effect: rgba(30, 41, 59, 0.9);
  --overlay-color: rgba(0, 0, 0, 0.65);

  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-tertiary: #a3b1c6;
  --text-muted: #7c8ba1;
  --text-inverse: #0f172a;
  --text-on-accent: #ffffff;
  --text-on-warning: #212529;
  --link-color: #7aa2ff;
  --tooltip-bg: #0f172a;
  --tooltip-fg: #ffffff;

  --border-light: #253247;
  --border-color: #334155;
  --border-strong: #475569;

  --success-color: #059669;
  --success-light: #6ee7b7;
  --success-50: rgba(16, 185, 129, 0.12);
  --success-bg: rgba(16, 185, 129, 0.18);
  --success-text: #6ee7b7;
  --success-border: rgba(16, 185, 129, 0.4);

  --warning-color: #ff7a4d;
  --warning-light: #ff9670;
  --warning-50: rgba(255, 94, 37, 0.12);
  --warning-accent: #fbbf24;
  --warning-bg: rgba(245, 158, 11, 0.18);
  --warning-text: #fcd34d;
  --warning-border: rgba(245, 158, 11, 0.4);

  --danger-color: #e5484d;
  --danger-light: #fca5a5;
  --danger-50: rgba(239, 68, 68, 0.12);
  --danger-bg: rgba(239, 68, 68, 0.18);
  --danger-text: #fca5a5;
  --danger-border: rgba(239, 68, 68, 0.4);

  --info-color: #3b74ff;
  --info-light: #7aa2ff;
  --info-50: rgba(79, 131, 255, 0.12);
  --info-bg: rgba(79, 131, 255, 0.18);
  --info-text: #93b4ff;
  --info-border: rgba(79, 131, 255, 0.4);

  --neutral-bg: #273449;
  --neutral-text: #cbd5e1;

  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.45), 0 8px 10px -6px rgb(0 0 0 / 0.45);
  --shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.6);
  --shadow-colored: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
  --focus-ring: 0 0 0 3px rgb(79 131 255 / 0.35);

  --bs-body-bg: var(--surface-color);
  --bs-body-color: var(--text-primary);
  --bs-secondary-color: var(--text-tertiary);
  --bs-secondary-bg: var(--surface-hover);
  --bs-tertiary-bg: var(--surface-muted);
  --bs-border-color: var(--border-color);
  --bs-emphasis-color: var(--text-primary);
  --bs-link-color: var(--link-color);
  --bs-link-hover-color: var(--primary-light);
}

/* Legacy names some pages reference; they were never defined before, so the
   styles using them silently fell through. Alias them to the real tokens. */
:root {
  --bg-color: var(--background-color);
  --background-subtle: var(--surface-muted);
  --bg-subtle: var(--surface-muted);
  --surface-secondary: var(--surface-muted);
  --card-bg: var(--surface-color);
  --bg-hover: var(--surface-hover);
  --hover-bg: var(--surface-hover);
  --text-color: var(--text-primary);
  --border-main: var(--border-color);
  --border-primary: var(--primary-color);
  --color-danger: var(--danger-color);
  --danger-soft: var(--danger-bg);
  --success-soft: var(--success-bg);
}

html {
  background-color: var(--background-color);
}

/* Bootstrap sets this too, but not every page loads Bootstrap. Without it,
   native inputs, selects, date pickers and scrollbars stay light in dark mode. */
[data-bs-theme="dark"] { color-scheme: dark; }

/* Text inputs and selects use the page's font and text color, not the
   browser's. Bootstrap's reboot inherits the font but not the color, and not
   every page loads Bootstrap. :where() keeps this at zero specificity so any
   component or page rule (.form-control, .form-input, ...) still wins. */
:where(input, select, textarea) {
  font-family: inherit;
  color: inherit;
}

/* Bootstrap utilities that are fixed-light even in 5.3 */
[data-bs-theme="dark"] .bg-white { background-color: var(--surface-color) !important; }
[data-bs-theme="dark"] .bg-light { background-color: var(--surface-muted) !important; }
/* .text-dark is left alone: it's almost always paired with a light/amber fill
   (bg-warning, bg-info), where dark text is correct in both themes. */
[data-bs-theme="dark"] .text-black-50 { color: var(--text-tertiary) !important; }
[data-bs-theme="dark"] .table-light {
  --bs-table-bg: var(--surface-muted);
  --bs-table-color: var(--text-primary);
  --bs-table-border-color: var(--border-color);
}
[data-bs-theme="dark"] .btn-light {
  --bs-btn-bg: var(--surface-hover);
  --bs-btn-color: var(--text-primary);
  --bs-btn-border-color: var(--border-color);
  --bs-btn-hover-bg: var(--surface-active);
  --bs-btn-hover-color: var(--text-primary);
  --bs-btn-hover-border-color: var(--border-strong);
}
[data-bs-theme="dark"] .btn-close { filter: var(--bs-btn-close-white-filter); }

/* Theme toggle (sidebar) */
/* Only ever hide, so the sidebar's own minimized-state rules still apply. */
:root:not([data-bs-theme="dark"]) .theme-toggle .theme-toggle__icon-dark,
[data-bs-theme="dark"] .theme-toggle .theme-toggle__icon-light { display: none !important; }

/* The logo PNG has near-black "opkald" text; invert lightness but keep the
   blue hue so it reads on dark surfaces. (Email-signature logos use alt="OpkaldAI"
   and are deliberately not matched.) */
[data-bs-theme="dark"] img[alt="Opkald AI"] { filter: invert(1) hue-rotate(180deg); }