/* ═══════════════════════════════════════════════════════════════════════
   OutSec Brand Theme — KANCHŌ
   Keeps Tailwind for layout/spacing utilities; replaces every colour and
   typography decision with the OutSec dark design system.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Token System ─────────────────────────────────────────────────────── */
:root {
  --bg:  #14222C;
  --sf:  #192d3a;
  --sf2: #1f3547;
  --bd:  rgba(255,255,255,0.07);
  --bd2: rgba(255,255,255,0.13);
  --tx1: #dde8e8;
  --tx2: #8ab0bc;
  --tx3: #527585;
  --tx4: #374f5a;
  --ac:  #479999;

  --pass-bg: rgba(92,145,116,0.2);   --pass-fg: #82c4a2;  --pass-bd: rgba(92,145,116,0.4);
  --fail-bg: rgba(192,107,87,0.2);   --fail-fg: #e07a5c;  --fail-bd: rgba(192,107,87,0.4);
  --unk-bg:  rgba(184,137,90,0.2);   --unk-fg:  #c4924a;  --unk-bd:  rgba(184,137,90,0.4);
  --na-bg:   rgba(255,255,255,0.06); --na-fg:   #527585;  --na-bd:   rgba(255,255,255,0.15);
  --ml2-bg:  rgba(71,153,153,0.2);   --ml2-fg:  #479999;  --ml2-bd:  rgba(71,153,153,0.4);
}

/* ── Typography ───────────────────────────────────────────────────────── */
body   { font-family: 'Public Sans', system-ui, sans-serif !important; }
h1, h2, h3 { font-family: 'Newsreader', Georgia, serif !important; }
.font-mono, code { font-family: 'IBM Plex Mono', 'Courier New', monospace !important; }

/* ── Page Base ────────────────────────────────────────────────────────── */
body               { background-color: var(--bg) !important; color: var(--tx2) !important; }
body.bg-gray-100   { background-color: var(--bg) !important; }
body.bg-slate-800  { background-color: var(--bg) !important; }  /* login pages */

/* ── Navigation ───────────────────────────────────────────────────────── */
nav {
  background-color: var(--sf) !important;
  border-bottom: 1px solid var(--bd) !important;
  color: var(--tx1) !important;
}
nav a.text-slate-300        { color: var(--tx2) !important; }
nav a.text-slate-300:hover  { color: var(--tx1) !important; }
nav button.text-slate-400        { color: var(--tx3) !important; }
nav button.text-slate-400:hover  { color: var(--tx1) !important; }

/* ── Surfaces ─────────────────────────────────────────────────────────── */
.bg-white    { background-color: var(--sf)    !important; }
.bg-slate-50 { background-color: var(--sf2)   !important; }
.bg-slate-100{ background-color: var(--na-bg) !important; }
.bg-slate-200{ background-color: rgba(255,255,255,0.1) !important; }
.bg-slate-300{ background-color: var(--tx4)  !important; }

/* ── Text Hierarchy ───────────────────────────────────────────────────── */
.text-white { color: var(--tx1) !important; }
.text-slate-800, .text-slate-700 { color: var(--tx1) !important; }
.text-slate-600, .text-slate-500 { color: var(--tx2) !important; }
.text-slate-400 { color: var(--tx3) !important; }
.text-slate-300 { color: var(--tx4) !important; }

.hover\:text-white:hover           { color: var(--tx1) !important; }
.hover\:text-slate-800:hover,
.hover\:text-slate-700:hover       { color: var(--tx1) !important; }
.hover\:text-slate-600:hover       { color: var(--tx2) !important; }
.hover\:text-blue-600:hover        { color: var(--ac)  !important; }

/* ── Borders ──────────────────────────────────────────────────────────── */
.border-slate-50,
.border-slate-100,
.border-slate-200  { border-color: var(--bd)  !important; }
.border-slate-300  { border-color: var(--bd2) !important; }

.divide-slate-100 > :not([hidden]) ~ :not([hidden]),
.divide-slate-50  > :not([hidden]) ~ :not([hidden]) { border-color: var(--bd) !important; }

/* ── Shadows ──────────────────────────────────────────────────────────── */
.shadow-sm { box-shadow: 0 1px 4px rgba(0,0,0,0.4), 0 0 0 1px var(--bd) !important; }
.shadow-lg { box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px var(--bd) !important; }

/* ── Primary Buttons (bg-slate-800 on interactive elements) ───────────── */
button.bg-slate-800,
a.bg-slate-800 {
  background-color: rgba(71,153,153,0.15) !important;
  border: 1px solid rgba(71,153,153,0.4)  !important;
  color: var(--ac) !important;
}
button.hover\:bg-slate-700:hover,
a.hover\:bg-slate-700:hover {
  background-color: rgba(71,153,153,0.27) !important;
}
.hover\:bg-slate-50:hover { background-color: rgba(255,255,255,0.04) !important; }

/* "Generate Report" (indigo) → solid teal */
.bg-indigo-600               { background-color: var(--ac) !important; border: none !important; color: #0f1e25 !important; }
.hover\:bg-indigo-700:hover  { background-color: #3a8888  !important; }

/* Confirm 2FA (green-700 solid) */
.bg-green-700              { background-color: rgba(92,145,116,0.3) !important; border: 1px solid var(--pass-bd) !important; color: var(--pass-fg) !important; }
.hover\:bg-green-600:hover { background-color: rgba(92,145,116,0.45) !important; }

/* Disable 2FA (red outline) */
.border-red-300 { border-color: var(--fail-bd) !important; }
.hover\:bg-red-50:hover { background-color: rgba(192,107,87,0.1) !important; }

/* ── Status: Pass ─────────────────────────────────────────────────────── */
.bg-green-50  { background-color: rgba(92,145,116,0.1) !important; }
.bg-green-100 { background-color: var(--pass-bg) !important; }
.bg-green-500 { background-color: var(--pass-fg) !important; }
.text-green-600, .text-green-700, .text-green-800 { color: var(--pass-fg) !important; }
.border-green-200, .border-green-300 { border-color: var(--pass-bd) !important; }

/* ── Status: Fail ─────────────────────────────────────────────────────── */
.bg-red-50  { background-color: rgba(192,107,87,0.1) !important; }
.bg-red-100 { background-color: var(--fail-bg) !important; }
.text-red-400, .text-red-500,
.text-red-600, .text-red-700 { color: var(--fail-fg) !important; }
.hover\:text-red-600:hover,
.hover\:text-red-700:hover { color: #f08a6c !important; }
.border-red-200, .border-red-300 { border-color: var(--fail-bd) !important; }

/* ── Status: Unknown / Warning ────────────────────────────────────────── */
.bg-amber-50  { background-color: rgba(184,137,90,0.1) !important; }
.bg-amber-100 { background-color: var(--unk-bg) !important; }
.text-amber-600, .text-amber-700,
.text-amber-800 { color: var(--unk-fg) !important; }
.text-amber-900 { color: #d4a45a !important; }
.border-amber-200, .border-amber-300 { border-color: var(--unk-bd) !important; }

/* ── Status: Info / ML2 (blue → teal) ────────────────────────────────── */
.bg-blue-100 { background-color: var(--ml2-bg) !important; }
.text-blue-600, .text-blue-700,
.text-blue-800 { color: var(--ml2-fg) !important; }
.border-blue-200 { border-color: var(--ml2-bd) !important; }

/* ── Admin / Purple ───────────────────────────────────────────────────── */
.bg-purple-100 { background-color: rgba(100,50,165,0.2) !important; }
.text-purple-600, .text-purple-700 { color: #b590e0 !important; }

/* ── Peer-checked (radio button selected state) ───────────────────────── */
.peer:checked ~ .peer-checked\:bg-green-100   { background-color: var(--pass-bg) !important; }
.peer:checked ~ .peer-checked\:text-green-700 { color: var(--pass-fg) !important; }
.peer:checked ~ .peer-checked\:bg-red-100     { background-color: var(--fail-bg) !important; }
.peer:checked ~ .peer-checked\:text-red-700   { color: var(--fail-fg) !important; }
.peer:checked ~ .peer-checked\:bg-amber-100   { background-color: var(--unk-bg)  !important; }
.peer:checked ~ .peer-checked\:text-amber-700 { color: var(--unk-fg) !important; }
.peer:checked ~ .peer-checked\:bg-slate-200   { background-color: var(--na-bg)   !important; }
.peer:checked ~ .peer-checked\:text-slate-600 { color: var(--na-fg) !important; }
.peer:checked ~ .peer-checked\:border-transparent { border-color: transparent !important; }

/* ── Form Inputs ──────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
textarea,
select {
  background-color: var(--sf2) !important;
  color: var(--tx1) !important;
  border-color: var(--bd2) !important;
}
input::placeholder, textarea::placeholder { color: var(--tx3) !important; }
input[type="checkbox"] { accent-color: var(--ac); }
input:focus, textarea:focus, select:focus {
  border-color: var(--ac) !important;
  box-shadow: 0 0 0 2px rgba(71,153,153,0.2) !important;
  outline: none;
}

/* ── Flash / Alert ────────────────────────────────────────────────────── */
/* Flash messages use bg-green-100 / border-green-300 / text-green-800 — covered above */