/* ValueOddsAPI light theme for the subpages.
   Loaded last on every page except the homepage (which uses light.css directly).
   It remaps the dark Tailwind utilities in the pre-built pages to the light design
   tokens, so the pages keep their structure and only change colour and type.
   Unlayered rules beat Tailwind's @layer utilities, so no !important is needed. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/geist.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/geist-mono.woff2) format("woff2"); }

:root {
  --surface-page: #f6f8f7;
  --surface-card: #ffffff;
  --surface-sunken: #eef2f0;
  --surface-inverse: #0b0c0e;
  --border: #e3e8e6;
  --border-mid: #cfd7d3;
  --border-strong: #7e8a85;
  --ink: #0b0c0e;
  --ink-strong: #2b3330;
  --ink-body: #3d4743;
  --ink-muted: #56615c;
  --ink-subtle: #69736e;
  --mint: #47fabe;
  --mint-ink: #0a7f58;
  --mint-tint: #e3fbf2;
  --mint-line: rgb(10 127 88 / .35);
  --negative: #c23030;
  --shadow-sm: 0 1px 2px 0 rgb(11 12 14 / .05);
  --shadow-lg: 0 24px 48px -16px rgb(11 12 14 / .18);
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}
html, body { background: var(--surface-page); }
body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.font-sans { font-family: var(--font-sans); }
.font-display { font-family: var(--font-display); letter-spacing: -0.02em; }
:focus-visible { outline: 2px solid var(--mint-ink); outline-offset: 2px; }
::selection { background: var(--mint-tint); }

/* Surfaces */
.bg-\[\#0b0c0e\] { background-color: var(--surface-page); }
.bg-\[\#080a09\] { background-color: var(--surface-card); }
.bg-\[\#121617\] { background-color: var(--surface-card); box-shadow: var(--shadow-sm); }
.bg-\[\#173127\] { background-color: var(--mint-tint); }
.bg-white\/\[\.025\] { background-color: var(--surface-sunken); }
.bg-emerald-400\/10 { background-color: var(--mint-tint); }
input.bg-\[\#0b0c0e\], select.bg-\[\#0b0c0e\], textarea.bg-\[\#0b0c0e\],
input.bg-\[\#121617\], select.bg-\[\#121617\], textarea.bg-\[\#121617\] { background-color: var(--surface-card); box-shadow: none; }
.bg-white { box-shadow: 0 0 0 1px var(--border); }
.shadow-2xl { box-shadow: var(--shadow-lg); }

/* Text */
.text-white { color: var(--ink); }
.text-zinc-200 { color: var(--ink-strong); }
.text-zinc-300 { color: var(--ink-body); }
.text-zinc-400 { color: var(--ink-muted); }
.text-zinc-500 { color: var(--ink-subtle); }
.text-emerald-200, .text-emerald-300, .text-emerald-400 { color: var(--mint-ink); }
.text-red-300 { color: var(--negative); }
.hover\:text-white:hover { color: var(--ink); }
/* Text on mint buttons keeps its dark colour */
.bg-emerald-400.text-black, .bg-emerald-400 .text-black, .bg-emerald-400.text-\[\#0b0c0e\] { color: var(--ink); }

/* Borders */
.border-white\/5, .border-white\/10, .border-white\/15 { border-color: var(--border); }
.border-white\/20, .border-white\/30 { border-color: var(--border-mid); }
input.border-white\/20, select.border-white\/20, textarea.border-white\/20,
input.border-white\/30, select.border-white\/30, textarea.border-white\/30 { border-color: var(--border-strong); }
.border-emerald-400 { border-color: var(--mint-ink); }
.border-emerald-400\/20, .border-emerald-400\/30 { border-color: var(--mint-line); }
.hover\:border-emerald-400:hover { border-color: var(--mint-ink); }
.hover\:border-emerald-400\/50:hover { border-color: var(--mint-line); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--mint-ink); }

/* Code stays on a dark panel, like the homepage */
pre, pre.bg-\[\#121617\] { background-color: var(--surface-inverse); border-color: rgb(255 255 255 / .1); box-shadow: none; color: #83f6c8; }
pre .text-white { color: #fff; }
pre .text-zinc-300, pre .text-zinc-400 { color: #b5bdb9; }
pre .text-emerald-200, pre .text-emerald-300, pre .text-emerald-400 { color: #83f6c8; }
:not(pre) > code { font-family: var(--font-mono); }

/* Article components (articles.css) */
.art-hero { border-color: var(--border); }
.art-hero figcaption { color: var(--ink-muted); background: var(--surface-sunken); }
.art-tldr { border-color: var(--mint-line); background: var(--mint-tint); }
.art-tldr h2 { color: var(--mint-ink); }
.art-tldr li { color: var(--ink-strong); }
.art-tldr li::before { background: var(--mint-ink); }
.art-terms div { border-color: var(--border); background: var(--surface-card); }
.art-terms dt { color: var(--ink); }
.art-terms dd { color: var(--ink-muted); }
.art-table { border-color: var(--border); background: var(--surface-card); }
.art-table thead { background: var(--mint-tint); color: var(--ink); }
.art-table thead th small { color: var(--mint-ink); }
.art-table tbody tr { border-top-color: var(--border); }
.art-table tbody tr:nth-child(even) { background: var(--surface-page); }
.art-table tbody th { color: var(--ink); }
.art-table tr.is-ref th, .art-table tr.is-ref td { color: var(--ink-muted); }
.art-table tr.is-us { background: var(--mint-tint) !important; }
.art-table td.plain { color: var(--ink-body); }
.art-bar span { background: var(--surface-sunken); }
.art-bar span::after { background: var(--mint-ink); }
.art-bar b { color: var(--ink); }
.art-pill.yes { background: var(--mint-tint); color: var(--mint-ink); }
.art-pill.part { background: #fdf3d8; color: #8a5a00; }
.art-pill.no { background: var(--surface-sunken); color: var(--ink-muted); }
.art-note { color: var(--ink-muted); }