/* =============================================================
   Verif-AI — Brand Override (Kinetic / Review palette)
   Drop-in: /static/css/brand.css
   Link AFTER base.css / app.css / report.css / etc. so it wins.
   ============================================================= */

:root {
  /* Paper / ivory */
  --paper:     #f6f1e8;
  --paper-2:   #ede5d3;
  --paper-3:   #e4d9bf;
  /* Ink */
  --ink:       #1a1d24;
  --ink-2:     #2d3340;
  --ink-3:     #5a6476;
  --ink-4:     #8c94a4;
  /* Rules */
  --rule:      #d6cdb8;
  --rule-strong:#7b8698;
  /* Accents (deep blue + soft blue) */
  --accent:    #1e3a5f;
  --accent-2:  #3d6ea8;
  --accent-hover: #2a4d7a;
  /* Status */
  --ok:        #2f6847;
  --warn:      #a56b1e;
  --bad:       #8a2d1f;
  /* Legacy surface tokens remapped */
  --bg:              var(--paper);
  --bg-2:            var(--paper-2);
  --bg-3:            var(--paper-3);
  --text:            var(--ink);
  --text-secondary:  var(--ink-2);
  --text-muted:      var(--ink-3);
  --border:          var(--rule);
  --brand:           var(--accent);
  --brand-hover:     var(--accent-hover);
}

/* Map old dark-teal tokens -> new paper tokens wherever they were used as CSS vars */
:root {
  --bg-primary:   #f6f1e8;
  --bg-secondary: #ede5d3;
  --bg-tertiary:  #e4d9bf;
  --text-primary:   #1a1d24;
  --text-secondary: #2d3340;
  --text-tertiary:  #5a6476;
  --border-color:   #d6cdb8;
  --accent-primary: #1e3a5f;
  --accent-secondary: #3d6ea8;
}

/* ---------- Global surface ---------- */
html, body {
  background: #ede5d3 !important;
  color: #1a1d24 !important;
}

/* Headings — Fraunces display */
h1, h2, h3, h4, h5, h6,
.display, .display-font,
.brand, .sidebar-brand, .brand-wordmark {
  font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
  color: #1a1d24 !important;
  letter-spacing: -0.015em;
}

/* Body / UI copy — IBM Plex Serif for body, Plex Sans for UI */
body, p, li, dd, dt, td, th,
input, textarea, select, button,
.sans, .ui, .label, .form-label, .nav, .nav-item {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
article p, .prose p, .body-copy, .report-body p {
  font-family: 'IBM Plex Serif', Georgia, serif !important;
}

/* ---------- Sidebar / app chrome ---------- */
.sidebar, aside.sidebar, .app-sidebar, .main-sidebar {
  background: #1a1d24 !important;
  color: #f6f1e8 !important;
  border-right: 1px solid #2d3340 !important;
}
.sidebar *, .sidebar-nav *, .sidebar-brand * {
  color: inherit;
}
.sidebar-brand {
  color: #f6f1e8 !important;
  font-family: 'Fraunces', serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}
.sidebar-brand span:last-child,
.sidebar-brand .accent,
.sidebar-brand em {
  color: #3d6ea8 !important;
  font-style: italic !important;
  font-weight: 500 !important;
}
.sidebar-nav .nav-item {
  color: #8c94a4 !important;
  border-radius: 2px !important;
}
.sidebar-nav .nav-item:hover {
  background: rgba(61, 110, 168, 0.12) !important;
  color: #f6f1e8 !important;
}
.sidebar-nav .nav-item.active {
  background: rgba(61, 110, 168, 0.2) !important;
  color: #f6f1e8 !important;
  border-left: 2px solid #3d6ea8;
}
.sidebar-nav .nav-item svg { color: inherit !important; }

.sidebar-nav .nav-upgrade {
  background: rgba(61, 110, 168, 0.15) !important;
  color: #a9c4e8 !important;
}
.sidebar-nav .nav-upgrade:hover {
  background: rgba(61, 110, 168, 0.25) !important;
  color: #f6f1e8 !important;
}
.sidebar-nav .nav-upgrade svg { color: #a9c4e8 !important; }
.sidebar-nav .nav-admin { color: #b08668 !important; }
.sidebar-nav .nav-admin:hover { background: rgba(176,134,104,0.12) !important; }
.sidebar-nav .nav-admin svg { color: #b08668 !important; }

/* ---------- Main content surface ---------- */
.main-content, main, .app-main, .page, .content, .dashboard {
  background: #ede5d3 !important;
  color: #1a1d24 !important;
}
.card, .panel, .box, .module, .widget,
.stat-card, .metric-card, .info-card,
.report-section, .section-card {
  background: #f6f1e8 !important;
  border: 1px solid #d6cdb8 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #1a1d24 !important;
}
hr, .divider, .rule { border-color: #d6cdb8 !important; }

/* ---------- Links / buttons ---------- */
a { color: #1e3a5f; }
a:hover { color: #3d6ea8; }

.btn, button.btn, .button, input[type="submit"] {
  border-radius: 2px !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  transition: background 0.15s, border-color 0.15s;
}
.btn-primary, .button-primary, .cta, .nav-cta, .btn.primary {
  background: #1e3a5f !important;
  color: #f6f1e8 !important;
  border: 1px solid #1e3a5f !important;
}
.btn-primary:hover, .button-primary:hover, .cta:hover, .nav-cta:hover {
  background: #2a4d7a !important;
  border-color: #2a4d7a !important;
  color: #f6f1e8 !important;
}
.btn-secondary, .button-secondary, .btn.secondary, .btn-outline {
  background: transparent !important;
  color: #1e3a5f !important;
  border: 1px solid #1e3a5f !important;
}
.btn-secondary:hover, .button-secondary:hover, .btn-outline:hover {
  background: rgba(30,58,95,0.08) !important;
}
.btn-ghost { color: #5a6476 !important; }
.btn-ghost:hover { background: rgba(30,58,95,0.06) !important; color: #1a1d24 !important; }

/* ---------- Inputs ---------- */
input, textarea, select {
  background: #f6f1e8 !important;
  color: #1a1d24 !important;
  border: 1px solid #d6cdb8 !important;
  border-radius: 2px !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
}
input:focus, textarea:focus, select:focus {
  border-color: #1e3a5f !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(30,58,95,0.12) !important;
}
::placeholder { color: #8c94a4 !important; }
label, .form-label { color: #2d3340 !important; font-weight: 600; }

/* ---------- Tables ---------- */
table { border-collapse: collapse; }
table th {
  background: transparent !important;
  color: #5a6476 !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 1px solid #1a1d24 !important;
  padding: 10px 12px !important;
}
table td {
  border-bottom: 1px solid #d6cdb8 !important;
  padding: 10px 12px !important;
  color: #1a1d24 !important;
}
table tr:hover td { background: rgba(214,205,184,0.25) !important; }

/* ---------- Status chips / pills ---------- */
.chip, .pill, .badge, .tag, .status {
  border-radius: 2px !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  font-size: 11px !important;
  padding: 3px 8px !important;
}
.status-ok, .badge-success, .pill-green { background: rgba(47,104,71,0.12) !important; color: #2f6847 !important; border: 1px solid rgba(47,104,71,0.35) !important; }
.status-warn, .badge-warning, .pill-amber { background: rgba(165,107,30,0.12) !important; color: #a56b1e !important; border: 1px solid rgba(165,107,30,0.35) !important; }
.status-bad, .badge-danger, .pill-red { background: rgba(138,45,31,0.1) !important; color: #8a2d1f !important; border: 1px solid rgba(138,45,31,0.35) !important; }
.status-info, .badge-info, .pill-blue { background: rgba(30,58,95,0.1) !important; color: #1e3a5f !important; border: 1px solid rgba(30,58,95,0.35) !important; }

/* ---------- Kill legacy cyan and dark-teal backgrounds ---------- */
[style*="#4FC3F7"] { color: #3d6ea8 !important; }
[style*="#08111e"], [style*="#0a1628"], [style*="#111d35"], [style*="#0F1729"] {
  background-color: #f6f1e8 !important;
  color: #1a1d24 !important;
}

/* ---------- Pull-quote numbers (editorial emphasis) ---------- */
.stat-value, .metric-value, .big-number, .headline-number {
  font-family: 'Fraunces', serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: #1e3a5f !important;
  letter-spacing: -0.02em !important;
}

/* ---------- Top nav (dashboard) ---------- */
.topbar, .app-topbar, .main-header, header.app-header {
  background: #f6f1e8 !important;
  border-bottom: 1px solid #1a1d24 !important;
  color: #1a1d24 !important;
}

/* ---------- Modals / overlays ---------- */
.modal, .dialog, .drawer, .popover {
  background: #f6f1e8 !important;
  color: #1a1d24 !important;
  border: 1px solid #1a1d24 !important;
  border-radius: 0 !important;
  box-shadow: 6px 6px 0 rgba(26,29,36,0.15) !important;
}
.modal-backdrop, .overlay { background: rgba(26,29,36,0.6) !important; }

/* ---------- Misc ---------- */
code, pre, kbd, samp {
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
  background: #ede5d3 !important;
  color: #1a1d24 !important;
  border: 1px solid #d6cdb8 !important;
  border-radius: 2px !important;
  padding: 1px 5px;
}
.empty-state, .placeholder {
  color: #8c94a4 !important;
  font-style: italic;
}

/* ---------- Fonts preload helper (inject via <link> on each page) ---------- */
/* <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..700&family=IBM+Plex+Serif:ital,wght@0,400..700;1,400..700&family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> */