:root {
  /* Legacy aliases — valores canônicos em design-system.css (Sprint A) */
  --icarus-bg: var(--bg-main);
  --icarus-fg: var(--text-primary);
  --icarus-muted: var(--text-secondary);
  --icarus-muted-2: color-mix(in srgb, var(--text-secondary) 78%, transparent);
  --icarus-surface: color-mix(in srgb, var(--bg-card) 92%, transparent);
  --icarus-surface-2: color-mix(in srgb, var(--bg-card) 88%, transparent);
  --icarus-surface-3: var(--bg-card);
  --icarus-input: var(--bg-card);
  --icarus-border: var(--border);
  --icarus-divider: color-mix(in srgb, var(--border) 85%, transparent);
  --icarus-green: var(--green);
  --icarus-red: var(--red);
  --icarus-blue: var(--blue);
  --icarus-ease: cubic-bezier(.2, .8, .2, 1);
  --icarus-t: 200ms;
  --icarus-shadow-hover: 0 12px 32px rgba(15, 23, 42, 0.12);
  --icarus-shadow-press: 0 6px 18px rgba(15, 23, 42, 0.10);
}
html[data-theme="light"] {
  --icarus-shadow-hover: 0 12px 32px rgba(15, 23, 42, 0.10);
  --icarus-shadow-press: 0 6px 18px rgba(15, 23, 42, 0.08);
}

/* Base — tokens do design system */
html[data-theme] body {
  background: var(--bg-main, var(--icarus-bg)) !important;
  color: var(--text-primary, var(--icarus-fg)) !important;
}

/* Global micro-interactions (SaaS feel) */
html[data-theme] .card-glass,
html[data-theme] .noc-card {
  transition: transform var(--icarus-t) var(--icarus-ease),
              box-shadow var(--icarus-t) var(--icarus-ease),
              background-color var(--icarus-t) var(--icarus-ease),
              border-color var(--icarus-t) var(--icarus-ease);
}
html[data-theme] .card-glass:hover,
html[data-theme] .noc-card:hover {
  box-shadow: var(--icarus-shadow-hover);
}
html[data-theme] .card-glass:active,
html[data-theme] .noc-card:active {
  box-shadow: var(--icarus-shadow-press);
}

html[data-theme] button {
  transition: box-shadow var(--icarus-t) var(--icarus-ease),
              background-color var(--icarus-t) var(--icarus-ease),
              border-color var(--icarus-t) var(--icarus-ease),
              color var(--icarus-t) var(--icarus-ease);
}
html[data-theme] a {
  transition: box-shadow var(--icarus-t) var(--icarus-ease),
              background-color var(--icarus-t) var(--icarus-ease),
              border-color var(--icarus-t) var(--icarus-ease),
              color var(--icarus-t) var(--icarus-ease);
}
html[data-theme] button:focus-visible,
html[data-theme] a:focus-visible,
html[data-theme] input:focus-visible,
html[data-theme] select:focus-visible,
html[data-theme] textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(110,121,255, 0.18);
  border-color: rgba(110,121,255, 0.45) !important;
}

/* Skeleton loading */
@keyframes icarus-skel {
  0% { background-position: 0% 0; }
  100% { background-position: 140% 0; }
}
.icarus-skeleton {
  border-radius: 12px;
  background: linear-gradient(
    90deg,
    rgba(148,163,184,0.10) 0%,
    rgba(148,163,184,0.18) 35%,
    rgba(148,163,184,0.10) 70%
  );
  background-size: 220% 100%;
  animation: icarus-skel 1200ms var(--icarus-ease) infinite;
}
html[data-theme="light"] .icarus-skeleton {
  background: linear-gradient(
    90deg,
    rgba(15,23,42,0.06) 0%,
    rgba(15,23,42,0.10) 35%,
    rgba(15,23,42,0.06) 70%
  );
}

/* Sidebar + “cards” glass */
html[data-theme] aside {
  background: color-mix(in srgb, var(--bg-card, var(--icarus-surface)) 92%, transparent) !important;
  border-color: var(--border, var(--icarus-border)) !important;
}
html[data-theme="light"] .card-glass {
  background: var(--bg-card, var(--icarus-surface-2)) !important;
  border-color: var(--border, var(--icarus-border)) !important;
}

/* Common text utilities used by the pages (fix low contrast in light mode) */
html[data-theme="light"] .text-white { color: var(--icarus-fg) !important; }
html[data-theme="light"] .text-slate-200,
html[data-theme="light"] .text-slate-300 { color: var(--icarus-fg) !important; }
html[data-theme="light"] .text-slate-400 { color: #334155 !important; }
html[data-theme="light"] .text-slate-500 { color: var(--icarus-muted) !important; }
html[data-theme="light"] .text-slate-600 { color: var(--icarus-muted-2) !important; }

/* Enfase de offline (rose claro, feito p/ fundo escuro) fica ilegivel no tema
   claro. Ex.: nome de host OFFLINE em Hosts (text-rose-100). Remapeia para um
   vermelho forte e legivel, mantendo o significado de alerta. */
html[data-theme="light"] .text-rose-100,
html[data-theme="light"] .text-rose-200 { color: #b42318 !important; }
html[data-theme="light"] .text-rose-300 { color: #be123c !important; }

/* Surfaces declared with bracket Tailwind classes (bg-[#0f172a], bg-[#030712], etc.) */
html[data-theme="light"] [class*="bg-[#0f172a]"],
html[data-theme="light"] [class*="bg-[#030712]"],
html[data-theme="light"] [class*="bg-[#0b1220]"] {
  background-color: var(--icarus-surface-3) !important;
}
html[data-theme="light"] [class*="bg-black/"] {
  background-color: rgba(15, 23, 42, 0.55) !important;
}

/* Borders/dividers that are very dark in light mode */
html[data-theme="light"] [class*="border-slate-8"],
html[data-theme="light"] [class*="divide-slate-8"] {
  border-color: var(--icarus-border) !important;
}
html[data-theme="light"] [class*="divide-slate-8"] > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--icarus-divider) !important;
}

/* Tables: ensure readable header/body on light mode */
html[data-theme="light"] table { color: var(--icarus-fg) !important; }
html[data-theme="light"] thead {
  background-color: #f1f5f9 !important;
}
html[data-theme="light"] thead th {
  color: #334155 !important;
}
html[data-theme="light"] tbody td {
  color: var(--icarus-fg) !important;
}
html[data-theme="light"] tbody tr:hover {
  background-color: rgba(15, 23, 42, 0.04) !important;
}

/* Inputs/selects/textarea: background + placeholder in light mode */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background-color: var(--icarus-input) !important;
  color: var(--icarus-fg) !important;
  border-color: rgba(15, 23, 42, 0.18) !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: rgba(15, 23, 42, 0.45) !important;
}

/* Accents: on light mode, Tailwind “-400/-300” tones can get too soft */
html[data-theme="light"] .text-blue-300,
html[data-theme="light"] .text-blue-400 { color: var(--blue) !important; }
html[data-theme="light"] .text-emerald-300,
html[data-theme="light"] .text-emerald-400 { color: #047857 !important; }
html[data-theme="light"] .text-amber-100,
html[data-theme="light"] .text-amber-200,
html[data-theme="light"] .text-amber-300,
html[data-theme="light"] .text-amber-400 { color: #92400e !important; }
html[data-theme="light"] .badge.degraded,
html[data-theme="light"] .badge.warning { color: #b45309 !important; }
html[data-theme="light"] .text-rose-300,
html[data-theme="light"] .text-rose-400 { color: #be123c !important; }
html[data-theme="light"] .text-cyan-200,
html[data-theme="light"] .text-cyan-400 { color: #0e7490 !important; }

/* Background utilities used as “dark chips”/badges — convert to light chips */
html[data-theme="light"] [class*="bg-slate-900"],
html[data-theme="light"] [class*="bg-slate-800"] {
  background-color: #f1f5f9 !important;
}
html[data-theme="light"] [class*="bg-slate-700"] {
  background-color: #e2e8f0 !important;
}
html[data-theme="light"] [class*="bg-slate-800/"],
html[data-theme="light"] [class*="bg-slate-700/"] {
  background-color: #f1f5f9 !important;
}

/* Borders commonly used around chips/buttons in dark mode */
html[data-theme="light"] [class*="border-slate-900"],
html[data-theme="light"] [class*="border-slate-800"],
html[data-theme="light"] [class*="border-slate-700"],
html[data-theme="light"] [class*="border-slate-600"] {
  border-color: rgba(15, 23, 42, 0.18) !important;
}