/* theme.css — shared dark-mode layer for cyberwv.com
   Loaded AFTER each page's inline <style>. All dark rules are scoped under
   :root[data-theme="dark"] so they win on specificity regardless of source order.
   Light theme = each page's own inline :root (untouched). See CLAUDE.md.

   Pages were adjusted so this file can drive everything via variables:
     - card/panel/input backgrounds  ->  var(--card, #fff)
     - "ink block" backgrounds (active chips, table headers, section headers,
       .tool-category, :hover buttons)  ->  var(--block, var(--primary))
   In light mode --card/--block are undefined and fall back to white / --primary,
   leaving the original design untouched. Dark mode defines them below. */

/* ---------- Dark palette (light-ink neo-brutalism) ---------- */
:root[data-theme="dark"] {
  --primary: #e8e9ec;        /* the "light ink": borders, hard shadows, headings, text */
  --secondary: #00ff88;      /* neon accents unchanged — they pop on dark */
  --accent: #ff0066;
  --accent-blue: #0088ff;

  --bg: #0e0e10;
  --card: #17181c;           /* card / panel / input surface (was `white`) */
  --surface: #1e2027;        /* chips / badges / subtle fills */
  --surface-dark: #0a0b0d;
  --block: #0a0b0d;          /* "ink block" fill — stays dark so light text reads */
  --border: #2c2f36;
  --text: #e8e9ec;
  --text-muted: #9aa3ad;
  --shadow: rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}

/* ---------- Page chrome ---------- */
:root[data-theme="dark"] body {
  background: linear-gradient(135deg, #0e0e10 0%, #141418 100%);
}

/* gradient heading text — invert the light->dark ramp to light->muted */
:root[data-theme="dark"] h1 {
  background: linear-gradient(135deg, #e8e9ec 0%, #9aa3ad 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Pastel status / category badges ----------
   Light theme uses pastel bg + saturated dark text; on dark we swap to a
   translucent tint of the same hue + a light readable text. (`.category-badge.host`
   is blue in mx-fingerprint / purple in dns-fingerprint — one selector, so it
   resolves to blue; a minor cosmetic deviation on dns.) */
:root[data-theme="dark"] .class-badge.A,
:root[data-theme="dark"] .protocol-badge.tcp,
:root[data-theme="dark"] .category-badge.c1xx,
:root[data-theme="dark"] .category-badge.host,
:root[data-theme="dark"] .category-badge.registrar {
  background: rgba(0, 136, 255, 0.16); color: #6cb8ff;
}
:root[data-theme="dark"] .class-badge.C,
:root[data-theme="dark"] .qual-badge.pass,
:root[data-theme="dark"] .category-badge.c2xx,
:root[data-theme="dark"] .category-badge.dns {
  background: rgba(0, 255, 136, 0.14); color: #4ade80;
}
:root[data-theme="dark"] .class-badge.D,
:root[data-theme="dark"] .qual-badge.softfail,
:root[data-theme="dark"] .protocol-badge.udp,
:root[data-theme="dark"] .category-badge.c3xx,
:root[data-theme="dark"] .category-badge.gateway {
  background: rgba(245, 158, 11, 0.16); color: #fbbf24;
}
:root[data-theme="dark"] .class-badge.E,
:root[data-theme="dark"] .qual-badge.fail,
:root[data-theme="dark"] .category-badge.c4xx {
  background: rgba(239, 68, 68, 0.16); color: #f87171;
}
:root[data-theme="dark"] .class-badge.B,
:root[data-theme="dark"] .class-badge.apipa,
:root[data-theme="dark"] .protocol-badge.both,
:root[data-theme="dark"] .category-badge.c5xx,
:root[data-theme="dark"] .category-badge.relay {
  background: rgba(168, 85, 247, 0.18); color: #c084fc;
}
:root[data-theme="dark"] .class-badge.loopback {
  background: rgba(236, 72, 153, 0.18); color: #f472b6;
}
:root[data-theme="dark"] .qual-badge.neutral {
  background: rgba(255, 255, 255, 0.08); color: #b8c0cc;
}

/* http-status-codes: large colored code numbers + ref-card headings (text-only) */
:root[data-theme="dark"] .status-code.c1xx,
:root[data-theme="dark"] .ref-card h3.c1xx { color: #38a3ff; }
:root[data-theme="dark"] .status-code.c2xx,
:root[data-theme="dark"] .ref-card h3.c2xx { color: #34d17e; }
:root[data-theme="dark"] .status-code.c3xx,
:root[data-theme="dark"] .ref-card h3.c3xx { color: #ffab2e; }
:root[data-theme="dark"] .status-code.c4xx,
:root[data-theme="dark"] .ref-card h3.c4xx { color: #ff6b6b; }
:root[data-theme="dark"] .status-code.c5xx,
:root[data-theme="dark"] .ref-card h3.c5xx { color: #c17bff; }

/* mac-lookup result-card states (pastel fills) */
:root[data-theme="dark"] .result-card.error   { background: rgba(255, 0, 102, 0.08); }
:root[data-theme="dark"] .result-card.success { background: rgba(0, 255, 136, 0.07); }

/* verkada modal cancel hover: bg becomes light --text-muted in dark; use dark text */
:root[data-theme="dark"] .modal-btn-cancel:hover { color: var(--bg); }

/* ---------- Circular theme toggle button ---------- */
#theme-toggle {
  position: fixed;
  top: 2rem;
  right: 2rem;
  z-index: 1000;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 3px solid var(--primary);
  border-radius: 50%;
  background: var(--card, #fff);
  color: var(--primary);
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--primary);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s, color 0.2s;
}
#theme-toggle:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--primary);
}
#theme-toggle:active {
  transform: translate(0, 0);
  box-shadow: 2px 2px 0 var(--primary);
}
#theme-toggle:focus-visible {
  outline: 3px solid var(--secondary);
  outline-offset: 2px;
}
#theme-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Light theme shows moon (offer to go dark); dark shows sun (offer to go light) */
#theme-toggle .icon-sun { display: none; }
#theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] #theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] #theme-toggle .icon-moon { display: none; }

@media (prefers-reduced-motion: reduce) {
  #theme-toggle,
  #theme-toggle:hover,
  #theme-toggle:active { transition: none; transform: none; }
}

@media (max-width: 768px) {
  #theme-toggle {
    top: 1rem;
    right: 1rem;
    width: 38px;
    height: 38px;
    box-shadow: 3px 3px 0 var(--primary);
  }
  #theme-toggle svg { width: 17px; height: 17px; }
}