/* Tedo Design Tokens — imported by all Svelte app bundles */
/* Defines CSS custom properties for light (:root) and dark (.dark) modes */
/* Uses Tailwind "neutral" grays (no blue tint) */

:root {
  /* Backgrounds */
  --bg-primary: #ffffff;
  --bg-secondary: #fafafa;
  --bg-tertiary: #f5f5f5;
  --bg-hover: #f5f5f5;
  --bg-active: #e5e5e5;
  --bg-input: #ffffff;
  --bg-elevated: #ffffff;

  /* Text */
  --text-primary: #171717;
  --text-secondary: #525252;
  --text-muted: #737373;
  --text-inverse: #fafafa;

  /* Borders */
  --border: #e5e5e5;
  --border-subtle: #f5f5f5;
  --border-strong: #d4d4d4;

  /* Semantic */
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --danger-text: #991b1b;
  --success: #16a34a;
  --success-bg: #f0fdf4;
  --success-text: #166534;
  --warning: #d97706;
  --warning-bg: #fffbeb;
  --warning-text: #92400e;
  --info: #2563eb;
  --info-bg: #eff6ff;
  --info-text: #1e40af;

  /* Accent (brand teal) */
  --accent: #9ec8cb;
  --accent-hover: #8bb8bc;
  --accent-text: #1a4548;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.1);

  /* Scrollbars */
  --scrollbar-thumb: rgba(0,0,0,0.15);
  --scrollbar-thumb-hover: rgba(0,0,0,0.3);
  --scrollbar-track: transparent;
}

.dark {
  --bg-primary: #161616;
  --bg-secondary: #1c1c1c;
  --bg-tertiary: #262626;
  --bg-hover: #2a2a2a;
  --bg-active: #333333;
  --bg-input: #1c1c1c;
  --bg-elevated: #222222;

  --text-primary: #e5e5e5;
  --text-secondary: #a3a3a3;
  --text-muted: #737373;
  --text-inverse: #171717;

  --border: #333333;
  --border-subtle: #262626;
  --border-strong: #404040;

  --danger: #ef4444;
  --danger-bg: #2a1515;
  --danger-text: #fca5a5;
  --success: #22c55e;
  --success-bg: #152a1a;
  --success-text: #86efac;
  --warning: #f59e0b;
  --warning-bg: #2a2215;
  --warning-text: #fcd34d;
  --info: #3b82f6;
  --info-bg: #15202a;
  --info-text: #93c5fd;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.5);

  --scrollbar-thumb: rgba(255,255,255,0.15);
  --scrollbar-thumb-hover: rgba(255,255,255,0.3);
  --scrollbar-track: transparent;

  /* Accent (brand teal — slightly darker in dark for contrast against bg) */
  --accent: #7fafb2;
  --accent-hover: #6c9ea2;
  --accent-text: #0f1d20;
}

/* ── Global Resets ── */
/* Override Tailwind defaults that don't adapt to dark mode */

/* Set default text and background on body so fixed/portal elements (modals, dropdowns)
   that sit outside app root divs still inherit the correct dark mode values. */
.dark body {
  color: var(--text-primary);
  background-color: var(--bg-primary);
}

/* border: 1px solid without an explicit color defaults to currentColor,
   which is the text ink (#111 light / near-white dark). Override in both
   modes so Tailwind border-* utilities use the theme border token. */
*, *::before, *::after {
  border-color: var(--border);
}

/* Tailwind's shadow-* uses hardcoded rgba values. Override to use theme. */
.dark .shadow-sm { box-shadow: var(--shadow-sm) !important; }
.dark .shadow-md, .dark .shadow { box-shadow: var(--shadow-md) !important; }
.dark .shadow-lg { box-shadow: var(--shadow-lg) !important; }

/* Common light-only backgrounds that need dark mode overrides */
.dark .bg-white { background-color: var(--bg-primary) !important; }
.dark .bg-gray-50, .dark .bg-slate-50 { background-color: var(--bg-secondary) !important; }
.dark .bg-gray-100, .dark .bg-slate-100 { background-color: var(--bg-tertiary) !important; }
.dark .bg-gray-200, .dark .bg-slate-200 { background-color: var(--bg-active) !important; }

/* Slate dark backgrounds — replace blue tint with neutral grays */
.dark .bg-slate-700 { background-color: var(--bg-tertiary) !important; }
.dark .bg-slate-800 { background-color: var(--bg-secondary) !important; }
.dark .bg-slate-900 { background-color: var(--bg-primary) !important; }
.dark .bg-slate-950 { background-color: #0a0a0a !important; }

/* Slate text — replace blue tint */
.dark .text-slate-100 { color: var(--text-primary) !important; }
.dark .text-slate-200 { color: var(--text-primary) !important; }
.dark .text-slate-300 { color: var(--text-secondary) !important; }

/* Slate borders — replace blue tint */
.dark .border-slate-600 { border-color: var(--border-strong) !important; }
.dark .border-slate-700 { border-color: var(--border) !important; }

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

/* Common light-only borders */
.dark .border-white { border-color: var(--border) !important; }
.dark .border-gray-50, .dark .border-slate-50 { border-color: var(--border-subtle) !important; }
.dark .border-gray-100, .dark .border-slate-100 { border-color: var(--border) !important; }
.dark .border-gray-200, .dark .border-slate-200 { border-color: var(--border) !important; }
.dark .border-gray-300, .dark .border-slate-300 { border-color: var(--border-strong) !important; }
.dark .border-black { border-color: var(--border-strong) !important; }

/* Placeholder text */
.dark .placeholder-gray-400::placeholder, .dark .placeholder-slate-400::placeholder { color: var(--text-muted) !important; }

/* Divide colors */
.dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]), .dark .divide-slate-50 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-subtle) !important; }
.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]), .dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; }
.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]), .dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; }

/* Modal backdrops — soften the harsh black.
   Tailwind's bg-black/50 (slash syntax) is used for modal
   overlays across 54 files. These overrides can't target the compiled
   Tailwind classes, so we use a broader approach. */

/* ── Scrollbars ── */
/* Thin, subtle scrollbars that adapt to light/dark mode. */
/* Applied globally — every overflow:auto/scroll element gets them. */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* WebKit (Chrome, Safari, Edge) — for finer control */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

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

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

/* Hide scrollbar until hover (optional — apply .scrollbar-on-hover to containers) */
.scrollbar-on-hover {
  scrollbar-width: none;
}
.scrollbar-on-hover::-webkit-scrollbar-thumb {
  background: transparent;
}
.scrollbar-on-hover:hover {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.scrollbar-on-hover:hover::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
}

/* ── Utility Classes (used by migrated Svelte apps) ── */

/* Text */
.site-text-primary { color: var(--text-primary); }
.site-text-secondary { color: var(--text-secondary); }
.site-text-muted { color: var(--text-muted); }
.site-text-success { color: var(--success-text); }
.site-text-danger { color: var(--danger-text); }
.site-text-warning { color: var(--warning-text); }
.site-text-info { color: var(--info-text); }

/* Backgrounds */
.site-bg-primary { background-color: var(--bg-primary); }
.site-bg-secondary { background-color: var(--bg-secondary); }
.site-bg-tertiary { background-color: var(--bg-tertiary); }
.site-bg-code { background-color: var(--bg-tertiary); }

/* Borders */
.site-border { border-color: var(--border); }
.site-divide > * + * { border-color: var(--border); }

/* Hover */
.site-hover:hover { background-color: var(--bg-hover); }

/* Card: bg + border combo */
.site-card { background-color: var(--bg-primary); border-color: var(--border); }
.site-card-header { background-color: var(--bg-secondary); border-color: var(--border); }

/* Input fields */
.site-input {
  background-color: var(--bg-input);
  border-color: var(--border);
  color: var(--text-primary);
}
.site-input::placeholder { color: var(--text-muted); }

/* Buttons */
.site-btn-primary {
  background-color: var(--bg-active);
  color: var(--text-primary);
}
.site-btn-primary:hover { opacity: 0.85; }

.site-btn-secondary {
  background-color: var(--bg-primary);
  border-color: var(--border);
  color: var(--text-secondary);
}
.site-btn-secondary:hover { background-color: var(--bg-hover); }

.site-btn-danger {
  border-color: var(--danger);
  color: var(--danger-text);
}
.site-btn-danger:hover { background-color: var(--danger-bg); }

/* Icon buttons */
.site-icon-btn { color: var(--text-muted); }
.site-icon-btn:hover { background-color: var(--bg-hover); color: var(--text-secondary); }

.site-icon-btn-danger { color: var(--text-muted); }
.site-icon-btn-danger:hover { background-color: var(--danger-bg); color: var(--danger-text); }

.site-icon-btn-teal { color: var(--text-muted); }
.site-icon-btn-teal:hover { background-color: var(--bg-hover); color: #0d9488; }
.dark .site-icon-btn-teal:hover { color: #2dd4bf; }

/* Navigation */
.site-nav-active {
  background-color: var(--bg-active);
  color: var(--text-primary);
  font-weight: 500;
}
.site-nav-inactive {
  color: var(--text-secondary);
}
.site-nav-inactive:hover { background-color: var(--bg-hover); }

/* Badges */
.site-badge { background-color: var(--bg-tertiary); color: var(--text-secondary); }
.site-badge-teal { background-color: var(--bg-tertiary); color: #0d9488; }
.dark .site-badge-teal { color: #2dd4bf; }
.site-badge-purple { background-color: #f3e8ff; color: #7c3aed; }
.dark .site-badge-purple { background-color: rgba(88, 28, 135, 0.3); color: #c084fc; }
.site-badge-blue { background-color: #dbeafe; color: #2563eb; }
.dark .site-badge-blue { background-color: rgba(30, 64, 175, 0.3); color: #60a5fa; }
.site-badge-success { background-color: var(--success-bg); color: var(--success-text); }
.site-badge-success-bg { background-color: var(--success-bg); }
.site-badge-warning { background-color: var(--warning-bg); color: var(--warning-text); }
.site-badge-warning-bg { background-color: var(--warning-bg); }

/* Alert boxes */
.site-error-box { background-color: var(--danger-bg); border-color: var(--danger); color: var(--danger-text); }
.site-success-box { background-color: var(--success-bg); border-color: var(--success); color: var(--success-text); }
.site-warning-box { background-color: var(--warning-bg); border-color: var(--warning); color: var(--warning-text); }
.site-info-banner { background-color: var(--info-bg); border-color: var(--info); color: var(--info-text); }

/* ── themed-* utility classes (used by explorer, lists, notes, settings, team, uptime) ── */

/* Text */
.text-themed-primary { color: var(--text-primary); }
.text-themed-secondary { color: var(--text-secondary); }
.text-themed-muted { color: var(--text-muted); }

/* Backgrounds */
.bg-themed-primary { background: var(--bg-primary); color: var(--text-primary); }
.bg-themed-secondary { background: var(--bg-secondary); }
.bg-themed-tertiary { background: var(--bg-tertiary); }
.bg-themed-elevated { background: var(--bg-elevated); }
.hover-themed:hover { background: var(--bg-hover); }

/* Borders */
.border-themed { border-color: var(--border); }
.border-themed-subtle { border-color: var(--border-subtle); }
.border-themed-strong { border-color: var(--border-strong); }
.border-top-themed { border-top: 1px solid var(--border); }
.divide-themed > :not([hidden]) ~ :not([hidden]),
.divide-themed > :not(:last-child) { border-color: var(--border); }

/* Cards & Panels */
.panel-header { border-color: var(--border); background: var(--bg-secondary); }
.card-themed, .card-hover-themed { border-color: var(--border); background: var(--bg-elevated); }
.card-hover-themed:hover { background: var(--bg-hover); }

/* Inputs */
.input-themed { background: var(--bg-input); border-color: var(--border-strong); color: var(--text-primary); }
.input-themed::placeholder { color: var(--text-muted); }

/* Chips & Badges */
.chip-themed { background: var(--bg-tertiary); color: var(--text-secondary); }
.badge-default { background: var(--bg-tertiary); color: var(--text-muted); }
.badge-green { background: #dcfce7; color: #16a34a; }
.dark .badge-green { background: rgba(22, 101, 52, 0.3); color: #86efac; }
.badge-red { background: #fef2f2; color: #dc2626; }
.dark .badge-red { background: rgba(127, 29, 29, 0.3); color: #fca5a5; }
.badge-amber { background: #fef3c7; color: #b45309; }
.dark .badge-amber { background: rgba(120, 53, 15, 0.5); color: #fcd34d; }
.badge-teal { background: #ccfbf1; color: #0f766e; }
.dark .badge-teal { background: rgba(20, 83, 77, 0.5); color: #5eead4; }
.badge-purple { background: #f3e8ff; color: #7e22ce; }
.dark .badge-purple { background: rgba(88, 28, 135, 0.5); color: #d8b4fe; }
.badge-blue { background: #dbeafe; color: #1d4ed8; }
.dark .badge-blue { background: rgba(30, 58, 138, 0.5); color: #93c5fd; }

/* Semantic text colors */
.text-success-themed { color: #16a34a; }
.dark .text-success-themed { color: #86efac; }
.text-danger-themed { color: #dc2626; }
.dark .text-danger-themed { color: #f87171; }
.text-warning-themed { color: #ca8a04; }
.dark .text-warning-themed { color: #fbbf24; }
.text-blue-themed { color: #2563eb; }
.dark .text-blue-themed { color: #60a5fa; }

/* Buttons */
.btn-primary-themed { background: var(--text-primary); color: var(--bg-primary); }
.btn-primary-themed:hover { opacity: 0.9; }
.btn-disabled-themed { background: var(--bg-tertiary); color: var(--text-muted); cursor: not-allowed; }
.secondary-btn-themed { border-color: var(--border); color: var(--text-secondary); }
.secondary-btn-themed:hover { background: var(--bg-hover); }
.action-btn-themed { color: var(--text-secondary); }
.action-btn-themed:hover { background: var(--bg-hover); color: var(--text-primary); }
.back-btn-themed { color: var(--text-muted); }
.back-btn-themed:hover { color: var(--text-primary); }
.back-btn-icon-themed { color: var(--text-muted); }
.back-btn-icon-themed:hover { background: var(--bg-hover); }
.remove-btn-themed { color: var(--text-muted); }
.remove-btn-themed:hover { color: var(--danger); background: var(--danger-bg); }
.danger-btn-themed { color: var(--danger); }
.danger-btn-themed:hover { background: var(--danger-bg); }
.menu-btn-themed { color: var(--text-secondary); }
.menu-btn-themed:hover { background: var(--bg-hover); }

/* Links */
.link-themed { color: var(--text-primary); }
.link-themed:hover { color: var(--text-secondary); }
.link-blue-themed { color: #2563eb; }
.link-blue-themed:hover { color: #1d4ed8; }
.dark .link-blue-themed { color: #60a5fa; }
.dark .link-blue-themed:hover { color: #93c5fd; }

/* Navigation */
.nav-item-active { background: var(--bg-tertiary); color: var(--text-primary); font-weight: 500; }
.nav-item-inactive { color: var(--text-secondary); }
.nav-item-inactive:hover { background: var(--bg-hover); }
.nav-item-themed { color: var(--text-secondary); }
.tab-active-themed { background: var(--bg-tertiary); color: var(--text-primary); }
.tab-inactive-themed { color: var(--text-muted); }
.tab-inactive-themed:hover { color: var(--text-secondary); }

/* Spinners */
.spinner-themed { border-color: var(--border); border-top-color: var(--text-muted); }

/* Alerts */
.alert-red-themed { border-color: #fecaca; background: #fef2f2; }
.dark .alert-red-themed { border-color: rgba(127, 29, 29, 0.5); background: rgba(127, 29, 29, 0.1); }
.alert-blue-themed { border-color: #93c5fd; background: rgba(239, 246, 255, 0.8); }
.dark .alert-blue-themed { border-color: #60a5fa; background: rgba(30, 58, 138, 0.3); }

/* Active/Selected backgrounds */
.bg-active-themed { background: var(--bg-active); }

/* Strong-bordered input (variant with --border-strong instead of --border) */
.input-strong-themed { background: var(--bg-input); border-color: var(--border-strong); color: var(--text-primary); }
.input-strong-themed::placeholder { color: var(--text-muted); }

/* Misc */
.bar-unknown { background: var(--bg-tertiary); }
.plan-highlight { background: rgba(99, 102, 241, 0.05); }
.dark .plan-highlight { background: rgba(49, 46, 129, 0.3); }
.list-item-selected { background: var(--bg-tertiary); }
.list-item-hover:hover { background: var(--bg-hover); }
.list-item-disabled { opacity: 0.5; border-color: var(--border); }
.status-success { background: #dcfce7; color: #15803d; }
.dark .status-success { background: rgba(22, 101, 52, 0.3); color: #86efac; }
.status-error { background: #fef2f2; color: #b91c1c; }
.dark .status-error { background: rgba(127, 29, 29, 0.3); color: #fca5a5; }
.status-running { background: #dbeafe; color: #1d4ed8; }
.dark .status-running { background: rgba(30, 58, 138, 0.3); color: #93c5fd; }

/* Toggle switch (off state) */
.site-toggle-off { background-color: var(--bg-tertiary); }

/* Spinner */
.site-spinner { border-color: var(--border); border-top-color: var(--text-secondary); }
.site-spinner-amber { border-color: #fcd34d; border-top-color: #d97706; }
.dark .site-spinner-amber { border-color: #92400e; border-top-color: #f59e0b; }
.site-spinner-green { border-color: #86efac; border-top-color: #16a34a; }
.dark .site-spinner-green { border-color: #166534; border-top-color: #22c55e; }