/* Residual — light theme + button hover fixes.
   Loaded after styles.css. Dark stays the default look; theme.js sets
   data-theme on <html> from the visitor's saved choice and adds the toggle. */

/* ---------- Hover fixes (both themes) ---------- */
/* .nav-links a:hover recoloured the white nav button's label to near-white, so it vanished. */
.nav-links a.btn-primary, .nav-links a.btn-primary:hover { color: #07080b; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn-primary:hover { background: #ffffff; color: #07080b; box-shadow: 0 0 0 2px rgba(125, 140, 255, .55), 0 16px 50px -8px rgba(125, 140, 255, .8); }
.btn-ghost:hover { color: var(--ink); background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, .34); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: none) { .btn:hover { transform: none; } }

/* Legal / 404 pages colour every link purple; keep buttons and the logo readable. */
.legal a.brand { color: var(--ink); }
.legal a.btn-primary, .legal a.btn-primary:hover { color: #07080b; }
.legal a.btn-ghost, .legal a.btn-ghost:hover { color: var(--ink); }
:root[data-theme="light"] .legal a.btn-primary, :root[data-theme="light"] .legal a.btn-primary:hover { color: #ffffff; }

/* ---------- Toggle button ---------- */
.theme-toggle { width: 38px; height: 38px; flex: none; display: inline-grid; place-items: center; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink-2); cursor: pointer; transition: color .15s, border-color .15s, background .15s; padding: 0; }
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-2); background: var(--panel-2); }
.theme-toggle svg { width: 17px; height: 17px; }
@media (max-width: 860px) { .nav-links { gap: 12px; } }
.theme-toggle.floating { position: fixed; right: 16px; bottom: 16px; z-index: 60; background: var(--bg-2); box-shadow: 0 8px 30px rgba(0, 0, 0, .25); }

/* ---------- Light theme ---------- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-2: #f5f6f8;
  --panel: rgba(12, 14, 22, 0.02);
  --panel-2: rgba(12, 14, 22, 0.045);
  --line: rgba(12, 14, 22, 0.09);
  --line-strong: rgba(12, 14, 22, 0.18);
  --ink: #0b0c10;
  --ink-2: #3a3f4b;
  --muted: #646b79;
  --faint: #959cab;
  --accent: #4f5df5;
  --accent-2: #7b5cf0;
  --accent-ink: #3c4ad8;
  --accent-soft: rgba(79, 93, 245, 0.08);
  --accent-wash: rgba(79, 93, 245, 0.18);
  --time: #9aa1ae;
  --good: #11804a;
  --good-soft: rgba(17, 128, 74, 0.09);
  --danger: #d23b3b;
}
:root[data-theme="light"] ::selection { color: var(--ink); }

/* Logo mark and hero art are drawn in light colours for the dark page */
:root[data-theme="light"] .brand-mark,
:root[data-theme="light"] .hero-art canvas { filter: invert(1) hue-rotate(180deg); }
:root[data-theme="light"] .hero-art::after { background: linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .6) 42%, rgba(255, 255, 255, 0) 70%), linear-gradient(0deg, var(--bg) 0%, rgba(255, 255, 255, 0) 28%); }
@media (max-width: 720px) { :root[data-theme="light"] .hero-art::after { background: linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .8) 55%, var(--bg) 100%); } }

/* Nav */
:root[data-theme="light"] .nav.scrolled,
:root[data-theme="light"] .static-nav { background: rgba(255, 255, 255, 0.8); }

/* Buttons: dark pill on light page */
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .nav-links a.btn-primary { background: var(--ink); color: #ffffff; box-shadow: 0 1px 2px rgba(12, 14, 22, .12), 0 10px 30px -12px rgba(79, 93, 245, .5); }
:root[data-theme="light"] .btn-primary:hover,
:root[data-theme="light"] .nav-links a.btn-primary:hover { background: #262a35; color: #ffffff; box-shadow: 0 0 0 2px rgba(79, 93, 245, .35), 0 16px 40px -12px rgba(79, 93, 245, .6); }
:root[data-theme="light"] .btn-ghost { background: rgba(12, 14, 22, 0.02); }
:root[data-theme="light"] .btn-ghost:hover { background: rgba(12, 14, 22, 0.06); border-color: rgba(12, 14, 22, .32); }

/* Surfaces */
:root[data-theme="light"] .panel { background: linear-gradient(180deg, rgba(12, 14, 22, 0.025), rgba(12, 14, 22, 0.008)); }
:root[data-theme="light"] .flow-card { background: #ffffff; box-shadow: 0 30px 80px -40px rgba(12, 14, 22, .22); }
:root[data-theme="light"] .tip { background: rgba(255, 255, 255, 0.98); box-shadow: 0 16px 40px rgba(12, 14, 22, .14); }
:root[data-theme="light"] .tag { background: rgba(12, 14, 22, .045); }
:root[data-theme="light"] .ref { background: rgba(12, 14, 22, .05); }
:root[data-theme="light"] .admin th { background: rgba(12, 14, 22, .04); }
:root[data-theme="light"] .admin tr:hover td { background: rgba(12, 14, 22, .02); }

/* Charts and meters */
:root[data-theme="light"] .bar-row:hover .name,
:root[data-theme="light"] .bar-row:focus-visible .name { color: var(--ink); }
:root[data-theme="light"] .bar-track,
:root[data-theme="light"] .time-track { background: rgba(12, 14, 22, 0.07); }
:root[data-theme="light"] .bar-fill.off { background: rgba(12, 14, 22, .2); }
:root[data-theme="light"] .tier .meter { background: rgba(12, 14, 22, .07); }
:root[data-theme="light"] .chart-svg .grid { stroke: rgba(12, 14, 22, 0.08); }

/* Gradient text that faded from white */
:root[data-theme="light"] .rate b,
:root[data-theme="light"] .deal-fig:last-child .v { background: linear-gradient(90deg, var(--ink), var(--accent-ink)); -webkit-background-clip: text; background-clip: text; }
:root[data-theme="light"] .result-figure { background: linear-gradient(180deg, var(--ink) 30%, var(--accent-ink)); -webkit-background-clip: text; background-clip: text; }

/* Form controls */
:root[data-theme="light"] .field { background: #ffffff; }
:root[data-theme="light"] .field:hover { border-color: rgba(12, 14, 22, .32); }
:root[data-theme="light"] .field:focus { background: #ffffff; }
:root[data-theme="light"] select.field option { background: #ffffff; color: var(--ink); }
:root[data-theme="light"] .seg button { background: #ffffff; }
:root[data-theme="light"] .seg button:hover { border-color: rgba(12, 14, 22, .34); }
:root[data-theme="light"] .seg button[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: #ffffff; box-shadow: 0 6px 20px -8px rgba(79, 93, 245, .5); }
:root[data-theme="light"] .chip { background: #ffffff; }
:root[data-theme="light"] .chip:hover { border-color: rgba(12, 14, 22, .32); background: rgba(12, 14, 22, 0.02); }
:root[data-theme="light"] .chip[aria-pressed='true'] { border-color: rgba(79, 93, 245, .6); background: var(--accent-soft); }
:root[data-theme="light"] .chip[aria-pressed='true']::before { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4.2 3.6 6.6 9 1.2' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat; border-color: var(--ink); }
:root[data-theme="light"] .vs-track.in em { color: #ffffff; }
:root[data-theme="light"] .teaser { background: rgba(79, 93, 245, 0.05); border-color: rgba(79, 93, 245, 0.16); }
:root[data-theme="light"] .next { background: rgba(79, 93, 245, 0.04); border-color: rgba(79, 93, 245, 0.2); }

/* Misc accents */
:root[data-theme="light"] .watch li::marker { color: #b7791f; }
:root[data-theme="light"] .todo { background: rgba(183, 121, 31, .12); color: #9a6212; }
:root[data-theme="light"] .cta-band::before { background: radial-gradient(50% 50% at 50% 50%, rgba(79, 93, 245, .18), rgba(123, 92, 240, .06) 45%, transparent 70%); }

@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }