/* WagerCue "Amber Terminal" dark theme layer.
   The broker engine is light-first (templates hardcode zinc/white Tailwind
   utilities). This layer remaps those utilities to the dark Amber Terminal
   tokens (from tokens.css) so the whole site renders dark without editing
   every template. Loaded AFTER tailwind.css/base.css; body-scoped (body.wc)
   for specificity so no !important is needed. Component polish lives below. */

/* ---- Typography ---- */
body {
  font-family: var(--font-body);
}
h1, h2, h3, h4, h5, h6,
.font-display {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
.font-mono, code, pre, kbd, samp,
.tabular-nums, .font-numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---- Base surface ---- */
body.wc {
  background-color: var(--color-bg);
  color: var(--color-fg);
}

/* ---- Backgrounds ---- */
body.wc .bg-white { background-color: var(--color-surface); }
body.wc .bg-zinc-50 { background-color: var(--color-bg); }
body.wc .bg-zinc-100 { background-color: var(--color-surface-2); }
body.wc .bg-zinc-200 { background-color: var(--color-surface-3); }
body.wc .bg-zinc-300 { background-color: var(--color-surface-3); }
body.wc .bg-zinc-800 { background-color: var(--color-surface-2); }
body.wc .bg-zinc-900 { background-color: var(--color-surface); }
body.wc .bg-black { background-color: #05070b; }

/* ---- Text ---- */
body.wc .text-zinc-900,
body.wc .text-black { color: var(--color-fg); }
body.wc .text-zinc-800 { color: var(--color-fg); }
body.wc .text-zinc-700 { color: #cbd5e1; }
body.wc .text-zinc-600 { color: var(--color-muted); }
body.wc .text-zinc-500 { color: var(--color-muted); }
body.wc .text-zinc-400 { color: var(--color-muted-2); }
body.wc .text-zinc-300 { color: #cbd5e1; }
body.wc .text-zinc-100,
body.wc .text-zinc-200 { color: var(--color-fg); }

/* ---- Borders / rings / dividers ---- */
body.wc .border-white,
body.wc .border-zinc-100,
body.wc .border-zinc-200,
body.wc .border-zinc-300,
body.wc .border-zinc-400,
body.wc .border-zinc-600,
body.wc .border-zinc-700,
body.wc .border-zinc-800 { border-color: var(--color-border); }
body.wc .divide-zinc-100 > :not([hidden]) ~ :not([hidden]),
body.wc .divide-zinc-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--color-border); }
body.wc .ring-zinc-200,
body.wc .ring-zinc-300 { --tw-ring-color: var(--color-border); }

/* ---- Gradient stops that assume a light backdrop ---- */
body.wc .from-white { --tw-gradient-from: var(--color-surface) var(--tw-gradient-from-position); }
body.wc .to-white { --tw-gradient-to: var(--color-surface) var(--tw-gradient-to-position); }
body.wc .via-white { --tw-gradient-via: var(--color-surface) var(--tw-gradient-via-position); }
body.wc .from-zinc-50 { --tw-gradient-from: var(--color-bg) var(--tw-gradient-from-position); }
body.wc .to-zinc-50 { --tw-gradient-to: var(--color-bg) var(--tw-gradient-to-position); }
body.wc .from-zinc-100 { --tw-gradient-from: var(--color-surface-2) var(--tw-gradient-from-position); }

/* ---- Hover states ---- */
body.wc .hover\:bg-white:hover { background-color: var(--color-surface-2); }
body.wc .hover\:bg-zinc-50:hover { background-color: var(--color-surface-2); }
body.wc .hover\:bg-zinc-100:hover { background-color: var(--color-surface-3); }
body.wc .hover\:bg-zinc-200:hover { background-color: var(--color-surface-3); }
body.wc .hover\:text-zinc-900:hover { color: var(--color-fg); }
body.wc .hover\:text-zinc-700:hover { color: var(--color-fg); }
body.wc .hover\:border-zinc-300:hover,
body.wc .hover\:border-zinc-600:hover,
body.wc .hover\:border-zinc-700:hover { border-color: var(--color-primary-hover); }

/* ---- Amber accent legibility: dark ink on amber fills ---- */
body.wc .bg-brand-500,
body.wc .bg-brand-600 { color: var(--color-on-primary); }
body.wc .bg-brand-500 :where(svg),
body.wc .bg-brand-600 :where(svg) { color: var(--color-on-primary); }

/* ---- Amber tint surfaces (badges, highlighted panels) ---- */
body.wc .bg-brand-50,
body.wc .bg-brand-100 { background-color: var(--color-primary-bg); }
body.wc .hover\:bg-brand-50:hover,
body.wc .hover\:bg-brand-100:hover { background-color: var(--color-primary-light); }
body.wc .border-brand-100,
body.wc .border-brand-200 { border-color: var(--color-primary-light); }

/* ---- Native form controls without an explicit background class ---- */
body.wc input:not([class*="bg-"]),
body.wc textarea:not([class*="bg-"]),
body.wc select:not([class*="bg-"]) {
  background-color: var(--color-surface-2);
  color: var(--color-fg);
  border-color: var(--color-border);
}
body.wc input::placeholder,
body.wc textarea::placeholder { color: var(--color-muted-2); }
body.wc .placeholder\:text-zinc-500::placeholder { color: var(--color-muted-2); }

/* ---- Focus rings / borders (search, filters, sort controls) ---- */
body.wc .focus\:border-brand-400:focus { border-color: var(--brand-400); }
body.wc .focus\:ring-brand-500\/20:focus { --tw-ring-color: rgba(255, 163, 26, 0.2); }

/* ---- Filter bar: sort menu stays on dark bar palette ---- */
body.wc [data-filter-bar] [data-dropdown-content] {
  background-color: var(--color-surface-2);
  border-color: var(--color-border);
}
body.wc [data-filter-bar] [data-dropdown-content] button:hover:not([class*="bg-brand"]),
body.wc [data-filter-bar] [data-dropdown-content] button:focus:not([class*="bg-brand"]) {
  background-color: var(--color-surface-3);
}
body.wc [data-filter-bar] [data-dropdown-content] button[class*="bg-brand"] {
  background-color: rgba(255, 163, 26, 0.18);
}

/* ---- Dark elevation: black-alpha shadows are invisible on dark ---- */
body.wc .shadow, body.wc .shadow-sm, body.wc .shadow-md,
body.wc .shadow-lg, body.wc .shadow-xl { box-shadow: var(--shadow-card); }

/* ---- Amber selection + focus ---- */
body.wc ::selection { background: rgba(255, 163, 26, 0.28); color: var(--color-fg); }
body.wc :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ---- Monospace tabular numerics for scores/odds/prices ---- */
body.wc .score, body.wc .odds, body.wc [data-numeric] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---- Opacity-variant surfaces (sticky header, glass overlays) ---- */
body.wc .bg-white\/95 { background-color: rgba(20, 26, 36, 0.95); }
body.wc .bg-white\/90 { background-color: rgba(20, 26, 36, 0.9); }
body.wc .bg-white\/80 { background-color: rgba(20, 26, 36, 0.82); }
body.wc .bg-white\/70 { background-color: rgba(20, 26, 36, 0.72); }
body.wc .bg-white\/60 { background-color: rgba(20, 26, 36, 0.6); }
body.wc .bg-white\/50 { background-color: rgba(20, 26, 36, 0.5); }
body.wc .bg-zinc-50\/90, body.wc .bg-zinc-50\/80 { background-color: rgba(11, 14, 20, 0.85); }
body.wc .bg-zinc-100\/80 { background-color: rgba(27, 36, 50, 0.8); }
body.wc .bg-zinc-900\/5, body.wc .bg-zinc-900\/10 { background-color: rgba(255, 255, 255, 0.04); }
body.wc .bg-zinc-900\/95 { background-color: rgba(20, 26, 36, 0.95); }
body.wc .bg-zinc-50\/40 { background-color: rgba(27, 36, 50, 0.55); }
body.wc .bg-zinc-100\/70 { background-color: rgba(35, 47, 64, 0.82); }

/* ---- Brand text on tinted surfaces ---- */
body.wc .text-brand-700,
body.wc .text-brand-800 { color: var(--brand-400); }
body.wc .text-brand-600 { color: var(--brand-400); }
body.wc .text-brand-400 { color: var(--brand-400); }
body.wc .text-brand-300 { color: var(--brand-300); }
body.wc .text-brand-100 { color: var(--brand-100); }
body.wc .text-brand-200 { color: var(--brand-200); }
body.wc .bg-brand-500\/20 { background-color: rgba(255, 163, 26, 0.18); }
body.wc .hover\:bg-brand-500\/15:hover { background-color: var(--color-surface-3); }
body.wc .hover\:text-brand-400:hover,
body.wc .hover\:text-brand-600:hover,
body.wc .hover\:text-brand-700:hover { color: var(--color-primary-hover); }
body.wc .border-brand-300,
body.wc .hover\:border-brand-300:hover { border-color: var(--brand-400); }
body.wc .wc-input:focus-visible,
body.wc select.wc-input:focus-visible,
body.wc .wc-money-field input:focus-visible,
body.wc .wc-percent-field input:focus-visible {
  outline: none;
}

body.wc .wc-money-field,
body.wc .wc-percent-field {
  color: var(--color-fg);
}

body.wc .wc-money-field > span,
body.wc .wc-percent-field > span,
body.wc .wc-money-field input,
body.wc .wc-percent-field input {
  color: inherit;
  background-color: transparent;
  border-color: transparent;
}

/* ---- Amber / sponsor surfaces ---- */
body.wc .bg-amber-50 { background-color: var(--color-primary-bg); }
body.wc .bg-amber-100 { background-color: var(--color-primary-light); }
body.wc .text-amber-700 { color: var(--color-sponsor); }
body.wc .border-amber-200,
body.wc .border-amber-300 { border-color: var(--color-sponsor-border); }

/* ---- Status tint surfaces (pros/cons, badges, alerts) ---- */
body.wc .bg-emerald-50 { background-color: #0e2a1b; }
body.wc .bg-emerald-100 { background-color: #123522; }
body.wc .text-emerald-600,
body.wc .text-emerald-700 { color: #4ade80; }
body.wc .bg-red-50 { background-color: #2a0f16; }
body.wc .bg-red-100 { background-color: #351018; }
body.wc .text-red-500 { color: #fb7185; }

/* ---- Blog hero + gradients ---- */
body.wc .from-zinc-900 { --tw-gradient-from: var(--color-surface) var(--tw-gradient-from-position); }
body.wc .via-zinc-900\/50 { --tw-gradient-via: rgba(20, 26, 36, 0.5) var(--tw-gradient-via-position); }
body.wc .to-transparent { --tw-gradient-to: transparent var(--tw-gradient-to-position); }
body.wc .from-brand-50\/60 { --tw-gradient-from: rgba(26, 34, 48, 0.95) var(--tw-gradient-from-position); }
body.wc .via-brand-50\/20 { --tw-gradient-via: rgba(26, 34, 48, 0.55) var(--tw-gradient-via-position); }
body.wc .to-white { --tw-gradient-to: var(--color-bg) var(--tw-gradient-to-position); }
body.wc .bg-zinc-50\/95 { background-color: rgba(20, 26, 36, 0.95); }

/* ---- Blog filter bar (category chips on dark sticky bar) ---- */
body.wc #blog-page [data-filter-bar] .bg-zinc-800 { background-color: var(--color-surface-2); }
body.wc #blog-page [data-filter-bar] .hover\:bg-zinc-700:hover { background-color: var(--color-surface-3); }
body.wc #blog-page [data-filter-bar] .border-zinc-700,
body.wc #blog-page [data-filter-bar] .border-zinc-800 { border-color: var(--color-border); }

/* ---- Blog cards ---- */
body.wc [data-blog-card] { background-color: var(--color-surface); border-color: var(--color-border); }
body.wc [data-blog-card]:hover { border-color: var(--color-primary-hover); }

/* ---- Prose (blog, legal, policy pages) ---- */
body.wc .prose-zinc h1,
body.wc .prose-zinc h2,
body.wc .prose-zinc h3,
body.wc .prose-zinc h4 { color: var(--color-fg); }
body.wc .prose h2,
body.wc .prose h3 { color: var(--color-fg); }
body.wc .prose p,
body.wc .prose li { color: #cbd5e1; }
body.wc .prose strong { color: var(--color-fg); }
body.wc .prose a { color: var(--color-primary); }
body.wc .prose a:hover { color: var(--color-primary-hover); }
body.wc .prose blockquote { color: var(--color-muted); border-color: var(--color-border); }
body.wc .prose code { color: var(--brand-300); background-color: var(--color-surface-2); }
body.wc .prose pre { background-color: var(--color-surface-2); color: var(--color-fg); }
body.wc .prose hr { border-color: var(--color-border); }
body.wc .prose thead th { color: var(--color-fg); }

/* ---- Tables: 2-tone palette (header/surface-2 + body surface / surface-2) ---- */
body.wc table th,
body.wc table td {
  border-color: var(--color-border);
}
body.wc table .bg-zinc-50,
body.wc table .bg-zinc-50\/40,
body.wc table .bg-zinc-100,
body.wc table .bg-zinc-100\/70,
body.wc table thead tr {
  background-color: var(--color-surface-2);
}
body.wc table:not(.wc-table--manual-rows) tbody tr:not([class*="bg-"]) {
  background-color: var(--color-surface);
}
body.wc table:not(.wc-table--manual-rows) tbody tr:not([class*="bg-"]):nth-child(even) {
  background-color: var(--color-surface-2);
}
body.wc table.wc-table--manual-rows tbody tr:not([class*="bg-"]) {
  background-color: var(--color-surface);
}

/* ---- Prose tables (blog posts, review body copy) ---- */
body.wc .prose table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  background-color: var(--color-surface);
  margin: 1.5rem 0;
}
body.wc .prose table th,
body.wc .prose table td {
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  padding: 0.625rem 0.875rem;
  vertical-align: top;
}
body.wc .prose table th:last-child,
body.wc .prose table td:last-child {
  border-right: 0;
}
body.wc .prose table tr:last-child th,
body.wc .prose table tr:last-child td {
  border-bottom: 0;
}
body.wc .prose table thead th,
body.wc .prose table > tbody > tr:first-child > th,
body.wc .prose table > tr:first-child > th {
  background-color: var(--color-surface-2);
  color: var(--color-fg);
  font-weight: 600;
}
body.wc .prose table tbody tr:nth-child(odd) {
  background-color: var(--color-surface);
}
body.wc .prose table tbody tr:nth-child(even) {
  background-color: var(--color-surface-2);
}
body.wc .prose table .bg-zinc-50,
body.wc .prose table .bg-zinc-100,
body.wc .prose table .bg-white {
  background-color: inherit;
}