/* === KOBOW INTEL · V2 DESIGN SYSTEM ===
   ODD/partners.odd.games-inspired re-skin.
   Loaded AFTER each page's inline styles so :root variables get overridden.
*/

/* Override CSS variables — the key trick: variables propagate to all uses */
:root {
  --bg: #0a0a08 !important;
  --bg-top: #1a1a18;
  --bg-bot: #0a0a08;
  --card: #13130f !important;
  --card-hi: #1a1a14 !important;
  --border: #2a2a25 !important;
  --ink: #ece8df !important;
  --ink-2: #b9b4a9 !important;
  --mute: #8a857d !important;
  --accent: #c9a662 !important;       /* warm muted gold instead of orange */
  --accent-2: #ddb56e !important;
  --accent-dim: #a8895a !important;
  --gold: #c9a662 !important;
  --info: #a8d5b4 !important;         /* soft green dot */
  --success: #a8d5b4 !important;
  --danger: #d49a8a !important;
  --purple: #c0a8c6 !important;
  --serif: 'Cormorant Garamond', Georgia, serif !important;
  --sans: 'Inter', sans-serif !important;
  --mono: 'IBM Plex Mono', monospace !important;
  --blood: #d49a8a !important;
}

/* Body — gradient background, Inter, cream */
html, body {
  background: linear-gradient(180deg, #1a1a18 0%, #0a0a08 100%) !important;
  background-attachment: fixed !important;
  color: #ece8df !important;
  font-family: 'Inter', sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
}

/* All h1/h2 — Cormorant Garamond italic */
h1, h2, .hero h1, .section h2, .modal-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  color: #ece8df !important;
}

/* H3 + game card titles — also serif italic but smaller */
.lib-card h3, .prod-card .prod-name, .game-card .name, h3,
.list-card h3, .card h3, .card-title, .modal h3, .modal-overview b {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: #ece8df !important;
}

/* H1 sizing */
h1 { font-size: 64px !important; line-height: 1.05 !important; }
.hero h1 { font-size: 84px !important; line-height: 1.02 !important; }

/* Labels / eyebrows / mono caps — keep mono caps */
.eyebrow, .hero-eyebrow, .brand-sub, .tb-link, .stat .lbl, .stat-card .lbl,
.hero-stat .lbl, .prod-tag, .flag, .open, .badge, .vendor-tag, .mm-lbl,
.feat-name, .yr-label, .pill, .kobow-spec, .feat-detail {
  font-family: 'IBM Plex Mono', monospace !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #8a857d !important;
}

/* Numbers in stats — serif italic gold */
.stat .num, .hero-stat .num, .prod-stat .v, .stat-card .v,
.metric .v, .row .val, .trow .v, .bar-row .val .big,
.list-card .row .val, .v {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
}

.hero-stat .num, .stat .num {
  font-size: 50px !important;
  color: #ece8df !important;
}

/* Color overrides for number variants */
.hero-stat .num.gold, .hero-stat .num.orange, .hero-stat .num.green,
.hero-stat .num.purple, .hero-stat .num.info, .hero-stat .num.blood,
.num.gold, .num.orange, .num.green, .num.purple, .num.info, .num.blood {
  color: #c9a662 !important;
}

/* Body text — cream */
p, .desc, .deck, .lede, .game-card .meta, .meta, .body, .modal-body {
  color: #b9b4a9 !important;
  font-family: 'Inter', sans-serif !important;
}

/* Hero deck italic serif (when displayed as paragraph in hero) */
.hero .deck {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-size: 21px !important;
  line-height: 1.5 !important;
  color: #b9b4a9 !important;
}
.hero .deck b {
  font-style: normal !important;
  font-weight: 600 !important;
  color: #ece8df !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 17px !important;
}

/* Brand mark — keep small dot + caps */
.brand-mark {
  background: linear-gradient(135deg, #c9a662 0%, #a8895a 100%) !important;
  color: #0a0a08 !important;
}
.brand-text {
  font-family: 'IBM Plex Mono', monospace !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  color: #ece8df !important;
}

/* Cards */
.card, .lib-card, .game-card, .prod-card, .list-card, .matrix-row, .hero-stat,
.stat-card, .stat, .feat-card, .yr-card, .r-yr, .parity-row {
  background: #13130f !important;
  border: 1px solid #2a2a25 !important;
  border-radius: 14px !important;
}

/* Pills */
.pill, .badge, .ribbon, .tag, .stat-tag, .badge-count, .label-pill,
[class*="pill"], [class*="badge"] {
  font-family: 'IBM Plex Mono', monospace !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  padding: 5px 11px !important;
  border-radius: 99px !important;
  background: rgba(255,255,255,0.04) !important;
  color: #b9b4a9 !important;
}

/* Links */
a {
  color: #c9a662 !important;
}
a:hover {
  color: #ddb56e !important;
}

/* Topbar */
.topbar, .global-nav {
  background: rgba(10,10,8,0.96) !important;
  border-bottom: 1px solid rgba(42,42,37,0.4) !important;
}
.tb-link.active {
  color: #c9a662 !important;
  background: rgba(201,166,98,0.10) !important;
  border: 1px solid #c9a662 !important;
}

/* Buttons / CTAs */
.cta-btn, .btn {
  background: #c9a662 !important;
  color: #0a0a08 !important;
  border: 1px solid #c9a662 !important;
  font-family: 'IBM Plex Mono', monospace !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
.cta-btn:hover {
  background: #ddb56e !important;
  border-color: #ddb56e !important;
}
.cta-btn.outline {
  background: transparent !important;
  color: #ece8df !important;
}

/* Hero backgrounds — keep dark gradient */
.hero {
  background: radial-gradient(circle at 20% 0%, rgba(201,166,98,0.06), transparent 50%), linear-gradient(180deg, #1a1a18 0%, #0a0a08 100%) !important;
  border-bottom: 1px solid rgba(42,42,37,0.3) !important;
}

/* Confidential / audit banner — keep but reskin */
[style*="background:#dc2626"], [style*="background: #dc2626"] {
  background: #3a2410 !important;
  color: #ddb56e !important;
}

/* Strike-through for "Kobow can IWG deliver more" */
.strike {
  color: #d49a8a !important;
}
.grad {
  background: linear-gradient(135deg, #c9a662, #ddb56e) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Modal */
.modal {
  background: #13130f !important;
  border: 1px solid #2a2a25 !important;
}
.modal-head {
  border-bottom: 1px solid #2a2a25 !important;
}
.modal-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
}

/* Tables */
table, .prize-table {
  background: transparent !important;
}
.prize-table th, table th {
  background: #0a0a08 !important;
  color: #c9a662 !important;
  font-family: 'IBM Plex Mono', monospace !important;
  letter-spacing: 0.18em !important;
  border-bottom: 1px solid #2a2a25 !important;
}
.prize-table td, table td {
  border-bottom: 1px solid rgba(42,42,37,0.4) !important;
  color: #b9b4a9 !important;
}

/* Footer */
footer {
  background: transparent !important;
  border-top: 1px solid rgba(42,42,37,0.3) !important;
  color: #8a857d !important;
  font-family: 'IBM Plex Mono', monospace !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

/* Don't break the audit banner if it's the very top of body */
body > div:first-child[style*="background"] {
  background: #3a2410 !important;
  color: #ddb56e !important;
}
