/* ═══════════════════════════════════════════════════════════════════════
   TNT-OVERRIDE.CSS — TENET5 Monochrome Operational Intelligence Spec
   ═══════════════════════════════════════════════════════════════════════
   Master override stylesheet. Loaded AFTER style.css on every page.
   Forces the #202020 operational-intel palette system-wide.
   
   Design reference: operational-intelligence.io / index.html Cap#160
   Palette: #202020 base, #c9a44c gold accent, Inter + IBM Plex Mono
   
   Created: 2026-04-24  |  SATOR: LIRIL ETHICS GATE FIRST
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ROOT VARIABLES (override any legacy :root) ─────────────────────── */
:root {
  --bg:            #202020 !important;
  --bg-elev:       #2a2a2a !important;
  --bg-card:       #262626 !important;
  --bg-darker:     #161616 !important;
  --border:        #333333 !important;
  --border-hot:    #4a4a4a !important;
  --text:          #ffffff !important;
  --text-primary:  #ffffff !important;
  --text-secondary:#b9b9b9 !important;
  --text-tertiary: #7a7a7a !important;
  --text-muted:    #b9b9b9 !important;
  --text-dim:      #7a7a7a !important;
  --accent:        #c9a44c !important;
  --accent-gold:   #c9a44c !important;
  --font-sans:     "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  --font-mono:     "IBM Plex Mono", "Consolas", ui-monospace, monospace !important;

  /* Kill legacy palette vars */
  --primary:       #c9a44c !important;
  --primary-light: #d4b46a !important;
  --secondary:     #262626 !important;
  --surface:       #262626 !important;
  --on-surface:    #ffffff !important;
  --card-bg:       #262626 !important;
  --section-bg:    #202020 !important;
  --hero-bg:       #161616 !important;

  /* Slate system overrides */
  --slate-bg:         #202020 !important;
  --slate-raised:     #262626 !important;
  --slate-sunken:     #1a1a1a !important;
  --slate-overlay:    #161616 !important;
  --slate-ink:        #ffffff !important;
  --slate-ink-strong: #ffffff !important;
  --slate-ink-dim:    #b9b9b9 !important;
  --slate-ink-muted:  #7a7a7a !important;
  --slate-accent:     #c9a44c !important;
  --slate-link:       #c9a44c !important;
  --slate-border:     #333333 !important;
  --slate-brass:      #c9a44c !important;

  color-scheme: dark !important;
}

/* ── GLOBAL SURFACE ─────────────────────────────────────────────────── */
html, body {
  background: #202020 !important;
  color: #ffffff !important;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Kill any legacy background patterns/images */
body.topo,
body.topo::before,
body::before {
  background-image: none !important;
  background: #202020 !important;
}

/* ── LEGACY OVERLAY KILL ────────────────────────────────────────────── */
.grain-overlay,
.vignette,
.film-grain,
.noise-overlay,
.topo-lines,
.quantanium-container::before,
.quantanium-container::after,
[class*="grain"],
[class*="vignette"] {
  display: none !important;
  opacity: 0 !important;
}

/* ── TYPOGRAPHY ─────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  color: #ffffff !important;
  font-family: "Inter", "Helvetica Neue", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

h1 { font-size: clamp(1.8rem, 4vw, 2.8rem) !important; }
h2 { font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important; }

p, li, td, th, dd, dt, span, div {
  color: #b9b9b9 !important;
}

/* Ensure primary text containers are readable */
article, main, .content, .page-content, [role="main"] {
  color: #b9b9b9 !important;
}

/* Strong emphasis stays white */
strong, b, .highlight, .emphasis {
  color: #ffffff !important;
}

/* ── LINKS ──────────────────────────────────────────────────────────── */
a {
  color: #c9a44c !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
a:hover {
  color: #ffffff !important;
}
a:visited {
  color: #c9a44c !important;
}

/* ── CARDS & SECTIONS ───────────────────────────────────────────────── */
.evidence-box,
.card,
.panel,
.info-box,
.data-card,
.finding-card,
.ts-card,
section[style*="border-radius"],
section[style*="background"],
div[class*="card"],
div[class*="panel"],
div[class*="box"] {
  background: #262626 !important;
  border: 1px solid #333333 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

/* Section backgrounds */
section {
  background-color: transparent !important;
}
section[style*="gradient"] {
  background: #262626 !important;
}

/* ── NAVIGATION ─────────────────────────────────────────────────────── */
.page-header,
#site-header-frame,
nav,
header {
  background: rgba(32, 32, 32, 0.94) !important;
  border-bottom: 1px solid #333333 !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

nav a, header a {
  color: #b9b9b9 !important;
}
nav a:hover, header a:hover {
  color: #ffffff !important;
}

/* ── FOOTER ─────────────────────────────────────────────────────────── */
footer, .site-footer, #site-footer-frame {
  background: #161616 !important;
  border-top: 1px solid #333333 !important;
  color: #b9b9b9 !important;
}

/* ── FORM ELEMENTS ──────────────────────────────────────────────────── */
button, input, select, textarea {
  background: #262626 !important;
  color: #ffffff !important;
  border: 1px solid #444444 !important;
  border-radius: 2px !important;
  font-family: inherit !important;
}
button:hover, input:hover {
  border-color: #c9a44c !important;
}
button:focus, input:focus, select:focus, textarea:focus {
  outline: 1px solid #c9a44c !important;
  outline-offset: 1px !important;
}

/* ── CODE BLOCKS ────────────────────────────────────────────────────── */
code, pre, .mono, [class*="mono"] {
  background: #161616 !important;
  border: 1px solid #333333 !important;
  color: #b9b9b9 !important;
  font-family: "IBM Plex Mono", Consolas, ui-monospace, monospace !important;
}

/* ── TABLES ─────────────────────────────────────────────────────────── */
table {
  border-collapse: collapse !important;
}
th {
  background: #262626 !important;
  color: #ffffff !important;
  border: 1px solid #333333 !important;
  padding: 8px 12px !important;
  font-weight: 500 !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
td {
  background: #202020 !important;
  border: 1px solid #333333 !important;
  padding: 8px 12px !important;
}
tr:hover td {
  background: #2a2a2a !important;
}

/* ── SKIP LINK ──────────────────────────────────────────────────────── */
.skip-link {
  background: #c9a44c !important;
  color: #202020 !important;
}

/* ── BADGES & TAGS ──────────────────────────────────────────────────── */
.badge, .tag, .label, .chip,
[class*="badge"], [class*="tag"] {
  background: rgba(201, 164, 76, 0.12) !important;
  color: #c9a44c !important;
  border: 1px solid rgba(201, 164, 76, 0.3) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

/* ── BLOCKQUOTES ────────────────────────────────────────────────────── */
blockquote {
  border-left: 3px solid #c9a44c !important;
  background: #1a1a1a !important;
  padding: 16px 20px !important;
  margin: 16px 0 !important;
  color: #b9b9b9 !important;
}
blockquote p {
  color: #b9b9b9 !important;
}

/* ── HORIZONTAL RULES ───────────────────────────────────────────────── */
hr {
  border: none !important;
  height: 1px !important;
  background: #333333 !important;
  margin: 32px 0 !important;
}

/* ── SCROLLBAR ──────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #161616;
}
::-webkit-scrollbar-thumb {
  background: #444444;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #555555;
}

/* ── SELECTION ──────────────────────────────────────────────────────── */
::selection {
  background: rgba(201, 164, 76, 0.3) !important;
  color: #ffffff !important;
}

/* ── IMAGES ─────────────────────────────────────────────────────────── */
img {
  filter: brightness(0.9) contrast(1.05) !important;
  border-radius: 4px !important;
}

/* ── LISTS ──────────────────────────────────────────────────────────── */
ul, ol {
  color: #b9b9b9 !important;
}
li::marker {
  color: #c9a44c !important;
}

/* ── SPECIFIC LEGACY CLASS OVERRIDES ────────────────────────────────── */
/* Old Shift5/S5 classes that may still exist */
.s5-header, .shift5-nav { display: none !important; }

/* OSINT dashboard specific */
.dashboard-header { background: #161616 !important; }
.metric-card, .stat-card { background: #262626 !important; border: 1px solid #333 !important; }
.metric-value, .stat-value { color: #c9a44c !important; font-family: "IBM Plex Mono", monospace !important; }

/* Evidence page specific */
.evidence-entry { background: #262626 !important; border: 1px solid #333 !important; }
.source-badge { background: rgba(201,164,76,0.1) !important; color: #c9a44c !important; }

/* Timeline specific */
.timeline-item { border-left: 2px solid #333 !important; }
.timeline-dot { background: #c9a44c !important; }
.timeline-date { color: #7a7a7a !important; font-family: "IBM Plex Mono", monospace !important; }

/* ── PRINT ──────────────────────────────────────────────────────────── */
@media print {
  html, body { background: #fff !important; color: #000 !important; }
  a { color: #000 !important; text-decoration: underline !important; }
  .grain-overlay, .vignette, nav, footer { display: none !important; }
}

/* ── REDUCED MOTION ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body { font-size: 15px !important; }
  h1 { font-size: 1.6rem !important; }
  h2 { font-size: 1.2rem !important; }
}