/* Borro's dark mode (Roy, 2026-10-20: "dont forget to add dark mode to the site"). Loaded last on both pages; theme.js
   sets data-theme on <html>. Near-black surfaces, light type, the same sunset accents, and brighter green and red so the
   chart reads on dark. The logo's black letters would vanish here, so dark uses the reversed wordmark
   (wordmark-dark.png: light letters, the same stripes and reels). */

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0A0A0B;
  --surface: #131316;
  --sunk: #1B1B1F;
  --ink: #EFEFEC;
  --text-2: #A8A9B0;
  --text-3: #8E8F96;
  --line: #24242A;
  --line-2: #34343B;
  --accent: #F2935F;
  --live: #3FD39A;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 18px 40px -20px rgba(0, 0, 0, .7);
  --act: #E66E37;
  --act-ink: #F6A06F;
  --up: #37C88E;
  --down: #FF6A5C;
}

/* The wordmark: the drawn one on light, the reversed one on dark. */
.lm-dark { display: none !important; }
:root[data-theme="dark"] .lm-light { display: none !important; }
:root[data-theme="dark"] .lm-dark { display: block !important; }

/* The sun/moon button. */
.theme-toggle { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text-2); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.theme-toggle:hover { color: var(--ink); border-color: var(--line-2); }
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }

/* ------------------------------------------------------------------ the landing page */
:root[data-theme="dark"] body { background: var(--canvas); }
:root[data-theme="dark"] .head { background: rgba(10, 10, 11, .8); }
:root[data-theme="dark"] .btn { background: #EFEFEC; border-color: #EFEFEC; color: #0A0A0B; }
:root[data-theme="dark"] .btn:hover { background: #FFFFFF; border-color: #FFFFFF; }
:root[data-theme="dark"] .btn.line { background: transparent; color: var(--ink); border-color: var(--line-2); }
:root[data-theme="dark"] .btn.line:hover { border-color: var(--ink); }
:root[data-theme="dark"] .btn:not(.line)::after { background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%); }
:root[data-theme="dark"] .hero .kicker { background: rgba(19, 19, 22, .72); }
:root[data-theme="dark"] .ticket { box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 30px 80px -30px rgba(220, 116, 64, .38), 0 60px 140px -70px rgba(237, 178, 90, .3); }
:root[data-theme="dark"] .ticket::after { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px rgba(255, 255, 255, .03); }
:root[data-theme="dark"] .mk th, :root[data-theme="dark"] .table-foot { background: #101013; }
:root[data-theme="dark"] .mk tbody tr:hover { background: #17171B; }
:root[data-theme="dark"] .product .viz { background: linear-gradient(180deg, #17171B, #131316); }
:root[data-theme="dark"] .flow .chip { background: var(--surface); }
:root[data-theme="dark"] .band { background: #050506; border-top: 1px solid var(--line); }
:root[data-theme="dark"] .horizon { opacity: .95; }

/* ------------------------------------------------------------------ the app */
:root[data-theme="dark"] body.rh { background: var(--canvas); }
:root[data-theme="dark"] .rh-bar { background: rgba(10, 10, 11, .86); }
:root[data-theme="dark"] .rh-search input { background: var(--sunk); }
:root[data-theme="dark"] .rh-search input:focus { background: var(--surface); }
:root[data-theme="dark"] .rh-results,
:root[data-theme="dark"] .order,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .watch,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .pcard,
:root[data-theme="dark"] .asset-btn,
:root[data-theme="dark"] .asset-menu,
:root[data-theme="dark"] .asset-menu input,
:root[data-theme="dark"] .orow input { background: var(--surface); color: var(--ink); }
:root[data-theme="dark"] .rh-results button:hover, :root[data-theme="dark"] .rh-results button.on,
:root[data-theme="dark"] .asset-items button:hover, :root[data-theme="dark"] .asset-items button.kb { background: var(--sunk); }
:root[data-theme="dark"] .asset-items button[aria-selected="true"] { background: rgba(230, 110, 55, .12); }
:root[data-theme="dark"] .wrow { border-bottom-color: var(--line); }
:root[data-theme="dark"] .wrow:hover, :root[data-theme="dark"] .wrow.on { background: var(--sunk); }
:root[data-theme="dark"] .chip2:hover { background: rgba(230, 110, 55, .1); }
:root[data-theme="dark"] .chart .dot { border-color: var(--canvas); }
:root[data-theme="dark"] .chart .line { filter: drop-shadow(0 0 3px color-mix(in srgb, currentColor 35%, transparent)); }
:root[data-theme="dark"] .toast { background: #EFEFEC; color: #0A0A0B; }
:root[data-theme="dark"] .sk { background: linear-gradient(90deg, #17171B 25%, #212126 37%, #17171B 63%); background-size: 400% 100%; }
:root[data-theme="dark"] .order, :root[data-theme="dark"] .panel { box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .8); }
:root[data-theme="dark"] .card:hover { box-shadow: 0 18px 36px -24px rgba(0, 0, 0, .8); }
:root[data-theme="dark"] .mtrade { box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .7); }