/* ============================================================
   NOVA - Refonte / Design tokens
   Dual-theme: dark (operator, default) + light
   ============================================================ */

:root, [data-theme="dark"] {
  /* DARK (default) */
  --bg-deep:        #06080F;          /* page background */
  --bg-surface:     #0C111B;          /* raised surface */
  --bg-surface-2:   #131826;          /* cards */
  --bg-surface-3:   #1A2030;          /* rows / inputs */
  --bg-surface-4:   #232A3D;          /* hover */

  --bd-faint:       rgba(125, 162, 232, 0.06);
  --bd-line:        rgba(125, 162, 232, 0.10);
  --bd-edge:        rgba(125, 162, 232, 0.16);
  --bd-strong:      rgba(125, 162, 232, 0.26);

  --tx-hi:          #E8EEF8;
  --tx-md:          #B0BCD3;
  --tx-lo:          #6D7991;
  --tx-faint:       #4A5470;
  --tx-mute:        #364152;

  --grid-tint:      rgba(125, 162, 232, 0.04);
  --log-bg:         #06080F;

  /* Nova blue - primary accent, taken from the logo */
  --nova:           #3B82F6;
  --nova-hot:       #2563EB;
  --nova-soft:      rgba(59, 130, 246, 0.14);
  --nova-glow:      rgba(59, 130, 246, 0.35);
  --nova-edge:      rgba(59, 130, 246, 0.45);

  /* Electric / live indicator */
  --live:           #38BDF8;
  --live-glow:      rgba(56, 189, 248, 0.45);

  /* Severity - house convention: critical=red, high=orange, medium=yellow,
     low=blue, info=green. Dark defaults here (brightened); light in [data-theme="light"]. */
  --sev-critical:   #EF4444;
  --sev-high:       #FB923C;
  --sev-medium:     #FACC15;
  --sev-low:        #3B82F6;
  --sev-info:       #22C55E;
  --sev-medium-ink: #1A1A1A;

  /* Status */
  --ok:             #10B981;
  --warn:           #F59E0B;
  --err:            #EF4444;

  /* TYPE */
  --f-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Consolas, monospace;

  /* RADII */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 7px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* SHADOW */
  --sh-1: 0 1px 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.4);
  --sh-2: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 24px rgba(0,0,0,0.45);
  --sh-glow: 0 0 0 1px var(--nova-edge), 0 0 24px var(--nova-glow);

  /* LAYOUT */
  --sidebar-w: 232px;
  --sidebar-w-min: 60px;
  --topbar-h: 52px;

  /* LEGACY COMPAT (mapped from old tokens) */
  --c-bg-0: var(--bg-deep);
  --c-bg-1: var(--bg-surface);
  --c-bg-2: var(--bg-surface-2);
  --c-bg-3: var(--bg-surface-3);
  --c-bg-4: var(--bg-surface-4);
  --c-text-0: var(--tx-hi);
  --c-text-1: var(--tx-md);
  --c-text-2: var(--tx-lo);
  --c-text-3: var(--tx-faint);
  --c-border-0: var(--bd-faint);
  --c-border-1: var(--bd-line);
  --c-border-2: var(--bd-edge);
  --c-border-focus: var(--nova);
  --c-accent: var(--nova);
  --c-accent-hover: var(--nova-hot);
  --c-accent-active: #1D4ED8;
  --c-accent-soft: var(--nova-soft);
  --c-success: var(--ok);
  --c-warning: var(--warn);
  --c-danger: var(--err);
  --c-danger-hover: #b91c1c;
  --c-info: var(--nova);
  --c-strength-good: #a3e635;
  --font-sans: var(--f-sans);
  --font-mono: var(--f-mono);
  --text-2xs: 0.625rem;
  --text-xs: 0.6875rem;
  --text-sm: 0.75rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi: 600;
  --weight-bold: 700;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --radius-sm: var(--r-xs);
  --radius-md: var(--r-sm);
  --radius-lg: var(--r-md);
  --radius-xl: var(--r-lg);
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-card: var(--sh-2);
  --shadow-focus: 0 0 0 3px var(--nova-soft);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --card-sm: 400px;
  --card-md: 480px;
  --card-lg: 560px;
  --content-sm: 720px;
  --content-md: 1080px;
  --content-lg: 1400px;
  --nav-height: 56px;
}

/* LIGHT theme */
[data-theme="light"] {
  --bg-deep:        #F4F6FA;
  --bg-surface:     #FFFFFF;
  --bg-surface-2:   #FFFFFF;
  --bg-surface-3:   #F4F6FA;
  --bg-surface-4:   #E7ECF4;

  /* Severity (light): critical red, high orange, medium yellow, low blue, info green */
  --sev-critical:   #DC2626;
  --sev-high:       #F97316;
  --sev-medium:     #EAB308;
  --sev-low:        #2563EB;
  --sev-info:       #16A34A;
  --sev-medium-ink: #1A1A1A;

  --bd-faint:       rgba(15, 23, 42, 0.05);
  --bd-line:        rgba(15, 23, 42, 0.09);
  --bd-edge:        rgba(15, 23, 42, 0.16);
  --bd-strong:      rgba(15, 23, 42, 0.28);

  --tx-hi:          #0B1530;
  --tx-md:          #3B475F;
  --tx-lo:          #6B7790;
  --tx-faint:       #94A0B8;
  --tx-mute:        #B7C0D1;

  --grid-tint:      rgba(15, 23, 42, 0.04);
  --log-bg:         #0C111B;

  --sh-1: 0 1px 0 rgba(255,255,255,0.7) inset, 0 1px 2px rgba(15,23,42,0.06);
  --sh-2: 0 1px 0 rgba(255,255,255,0.7) inset, 0 4px 16px rgba(15,23,42,0.08);
}

/* Universal reset that respects the artboards */
.nova {
  font-family: var(--f-sans);
  color: var(--tx-hi);
  background: var(--bg-deep);
  font-size: 13px;
  line-height: 1.5;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.nova *, .nova *::before, .nova *::after { box-sizing: border-box; }
.nova button:not(.btn) { font-family: inherit; color: inherit; cursor: pointer; background: none; border: none; padding: 0; }
.nova button.btn { font-family: inherit; cursor: pointer; }
.nova a { color: inherit; text-decoration: none; }
.nova input, .nova textarea, .nova select { font-family: inherit; color: inherit; background: none; border: none; outline: none; }
.nova svg { display: block; }

/* Atom: tactical micro label */
.tac {
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-lo);
}
.tac-hi { color: var(--tx-md); }
.tac-nova { color: var(--nova); }

/* Atom: monospace numeric */
.mono {
  font-family: var(--f-mono);
  font-feature-settings: 'tnum', 'zero';
  font-variant-numeric: tabular-nums;
}

/* Atom: hairline nova crack divider */
.nova-crack {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bd-line) 18%, var(--bd-edge) 50%, var(--bd-line) 82%, transparent);
}
.nova-crack::before {
  content: '';
  position: absolute;
  inset: -1px 0;
  background: linear-gradient(90deg, transparent 40%, var(--nova-glow) 50%, transparent 60%);
  opacity: 0.5;
  filter: blur(2px);
}

/* Atom: card */
.card {
  position: relative;
  background: var(--bg-surface-2);
  border: 1px solid var(--bd-line);
  border-radius: var(--r-md);
}
.card-pad { padding: 16px; }
.card-stripe::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--nova) 35%, var(--live) 65%, transparent);
  opacity: 0.7;
}
.card-stripe-danger::before {
  background: linear-gradient(90deg, transparent, var(--sev-critical) 50%, transparent);
}

/* Atom: pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--r-xs);
  font-size: 11px;
  font-weight: 500;
  font-family: var(--f-mono);
  background: var(--bg-surface-3);
  border: 1px solid var(--bd-line);
  color: var(--tx-md);
}
.pill-dot { width: 6px; height: 6px; border-radius: 50%; }
.pill-nova { color: var(--nova); border-color: var(--nova-edge); background: var(--nova-soft); }
.pill-ok   { color: var(--ok);   border-color: rgba(16,185,129,0.30); background: rgba(16,185,129,0.10); }
.pill-warn { color: var(--warn); border-color: rgba(245,158,11,0.30); background: rgba(245,158,11,0.10); }
.pill-err  { color: var(--err);  border-color: rgba(239,68,68,0.30);  background: rgba(239,68,68,0.10); }

/* Severity pills (alerts) */
.sev { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--r-xs); font-size: 10px; font-weight: 700; font-family: var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.sev-c { background: var(--sev-critical); color: #fff;                    border: 1px solid transparent; }
.sev-h { background: var(--sev-high);     color: #fff;                    border: 1px solid transparent; }
.sev-m { background: var(--sev-medium);   color: var(--sev-medium-ink);   border: 1px solid transparent; }
.sev-l { background: var(--sev-low);      color: #fff;                    border: 1px solid transparent; }
.sev-i { background: var(--sev-info);     color: #fff;                    border: 1px solid transparent; }

/* Atom: button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--r-sm);
  border: 1px solid var(--bd-edge);
  background: var(--bg-surface-3);
  color: var(--tx-hi);
  transition: background 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}
.btn:hover { background: var(--bg-surface-4); border-color: var(--bd-strong); }
.btn svg { width: 14px; height: 14px; }
.btn-primary {
  background: linear-gradient(180deg, var(--nova), var(--nova-hot));
  border-color: var(--nova-edge);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 4px 12px rgba(59,130,246,0.30);
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--tx-md); }
.btn-ghost:hover { background: var(--bg-surface-3); color: var(--tx-hi); border-color: var(--bd-line); }
.btn-danger { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.40); color: #FCA5A5; }
.btn-danger:hover { background: rgba(239,68,68,0.20); }
.btn-sm { height: 26px; padding: 0 9px; font-size: 11px; }
.btn-icon { width: 30px; padding: 0; }

/* Atom: input */
.inp {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  background: var(--bg-surface-3);
  border: 1px solid var(--bd-line);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--tx-hi);
  width: 100%;
}
.inp:focus, .inp:focus-within { border-color: var(--nova-edge); box-shadow: 0 0 0 3px var(--nova-soft); }
.inp input { width: 100%; }
.inp svg { width: 14px; height: 14px; color: var(--tx-lo); flex-shrink: 0; }
.inp ::placeholder { color: var(--tx-faint); }

/* Atom: kbd */
.kbd {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 5px;
  border-radius: 3px;
  border: 1px solid var(--bd-edge);
  background: var(--bg-surface-3);
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--tx-md);
}

/* Live dot (pulsing) */
.livedot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--live); }
.livedot::before, .livedot::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid var(--live); opacity: 0;
  animation: livepulse 2s ease-out infinite;
}
.livedot::after { animation-delay: 1s; }
@keyframes livepulse {
  0% { transform: scale(0.5); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Severity bar */
.sev-bar { display: flex; gap: 1px; height: 4px; border-radius: var(--r-xs); overflow: hidden; }
.sev-bar > div { height: 100%; }

/* Section header */
.sect-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bd-line);
}
.sect-head h3 { font-size: 13px; font-weight: 600; color: var(--tx-hi); letter-spacing: -0.01em; margin: 0; }

/* Table */
.tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.tbl thead th {
  padding: 9px 12px;
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tx-lo);
  border-bottom: 1px solid var(--bd-line);
  background: var(--bg-surface);
}
.tbl tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--bd-faint);
  color: var(--tx-md);
  vertical-align: middle;
}
.tbl tbody tr:hover td { background: var(--bg-surface-3); color: var(--tx-hi); }

/* Scrollbars */
.nova ::-webkit-scrollbar { width: 6px; height: 6px; }
.nova ::-webkit-scrollbar-track { background: transparent; }
.nova ::-webkit-scrollbar-thumb { background: var(--bd-edge); border-radius: 3px; }
.nova ::-webkit-scrollbar-thumb:hover { background: var(--bd-strong); }