/* theme.css — reader settings (footer → Settings). Loaded after every other
   stylesheet; /boot.js sets the attributes on <html> before the first paint.

   The site is built on CSS variables, so most of a theme is re-pointing them.
   The rest are the places that hard-code a light surface (gradients on table
   heads and panel headers, the frosted nav, white chips), listed below. */

/* --- text colour presets ---------------------------------------------------- */
:root[data-text="contrast"] { --text: #0b0f17; --muted: #3d4a60; }
:root[data-text="soft"]     { --text: #3a4456; --muted: #6f7d94; }
body { color: var(--text); }

/* --- dark ------------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1311;
  --bg-2: #18211d;
  --panel: #131b18;
  --panel-2: #18221e;
  --line: #26332d;
  --text: #e3ebe6;
  --muted: #93a39b;
  --green: #3fcf82;
  --red: #ff6b70;
  --amber: #f0b44a;
  --accent: #9b8bff;
  --brand-soft: rgba(63, 174, 107, .16);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px -16px rgba(0,0,0,.7);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.3), 0 24px 48px -24px rgba(0,0,0,.8);
}
/* Leaf green is too dark to read on a dark panel; lift it unless the reader
   chose their own accent. */
:root[data-theme="dark"]:not(.custom-accent) { --brand: #3fae6b; --brand-2: #52c98a; --brand-dark: #2b8f4d; }
:root[data-theme="dark"][data-text="contrast"] { --text: #ffffff; --muted: #b9c6bf; }
:root[data-theme="dark"][data-text="soft"]     { --text: #c3cec8; --muted: #84948c; }

:root[data-theme="dark"] body {
  background:
    radial-gradient(1100px 560px at 82% -12%, rgba(63,174,107,.10) 0%, transparent 60%),
    linear-gradient(135deg, #0c1210, #111816);
  background-attachment: fixed;
}
:root[data-theme="dark"] .nav { background: rgba(13, 19, 17, .86); box-shadow: 0 1px 0 rgba(0,0,0,.4); }
:root[data-theme="dark"] .markets-table thead th,
:root[data-theme="dark"] .panel-h { background: linear-gradient(180deg, #18221e, #151e1a); }
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea { background-color: var(--panel-2); color: var(--text); border-color: var(--line); }
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: #6f7f77; }
:root[data-theme="dark"] .seg .cnt,
:root[data-theme="dark"] .seg button .cnt { background: rgba(255,255,255,.10); color: var(--text); }
:root[data-theme="dark"] .of-pop { background: rgba(0, 0, 0, .55); }
:root[data-theme="dark"] .md-x:hover { background: rgba(255,255,255,.08); }
:root[data-theme="dark"] .t-dec { background: repeating-linear-gradient(45deg, #2a3530 0 4px, #1c2622 4px 8px); }
:root[data-theme="dark"] code, :root[data-theme="dark"] pre { color: var(--text); }
:root[data-theme="dark"] a { color: var(--brand-2); }
:root[data-theme="dark"] .nav .links a { color: var(--text); }
:root[data-theme="dark"] .nav .links a.active { color: #fff; }
:root[data-theme="dark"] img.tok-ico, :root[data-theme="dark"] .ico { background-color: #1d2723; }
:root[data-theme="dark"] .hero, :root[data-theme="dark"] .hero-sm { background-color: transparent; }
:root[data-theme="dark"] .set-tabs button[aria-selected="true"],
:root[data-theme="dark"] .set-seg button[aria-pressed="true"] { background: #26332d; box-shadow: 0 0 0 1px #33433b; }
:root[data-theme="dark"] .set-tabs, :root[data-theme="dark"] .set-seg { background: #0f1614; }