/* 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;

  /* 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);
}

.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);
}

/* ── 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-top-themed { border-top: 1px solid var(--border); }
.divide-themed > :not([hidden]) ~ :not([hidden]) { 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); 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; }