/* ============================================================================
   pm-theme.css — Polymarket-accurate DARK + LIGHT token system.
   Loaded AFTER style.css so it overrides the hardcoded :root.
   DEFAULT = DARK (no attribute) → site looks identical to today.
   LIGHT   = :root[data-theme="light"] → opt-in via toggle (localStorage 'pm-theme').
   To later make LIGHT the default: move the light values into :root and the
   dark values into :root[data-theme="dark"], and flip the no-flash script.
   FAST REVERT: remove the pm-theme.css <link> (+ inline script) from
   lib/template.php, or delete this file. Nothing else changes.
   Values verbatim from polymarket.com compiled CSS (2026-06-08).
   ============================================================================ */

/* ---- DARK (default; current site palette = already PM-exact, accent fixed) -- */
:root{
  --font-body:'Heebo','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:'Inter','Heebo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --bg:#15191D; --bg-surface:#1E2428; --bg-card:#1E2428; --bg-hover:#262C34; --bg-input:#1E2428;
  --border:#242B32; --border-light:#2E353D;
  --text:#E5E7EB; --text-strong:#FFFFFF; --text-secondary:#7B8996; --text-muted:#5C6370;

  --accent:#4877ff; --accent-hover:#5b88ff;            /* PM brand blue (dark) — was #0093FD */
  --accent-soft:rgba(72,119,255,0.14); --accent-glow:rgba(72,119,255,0.28);

  --green:#3DB468; --green-hover:#35A05C; --green-soft:rgba(61,180,104,0.15); --green-bg:rgba(61,180,104,0.08);
  --red:#CB3131;  --red-hover:#B02828;  --red-soft:rgba(203,49,49,0.15);  --red-bg:rgba(203,49,49,0.08);
  --yellow:#F59E0B; --yellow-soft:rgba(245,158,11,0.12);

  --radius:12px; --radius-sm:7px; --radius-lg:12px;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.3); --shadow:0 4px 12px rgba(0,0,0,0.4); --shadow-lg:0 8px 32px rgba(0,0,0,0.5);
  --transition:150ms ease; --max-width:1360px; --header-h:56px; --subnav-h:48px;
  color-scheme:dark;
}

/* ---- LIGHT (opt-in via toggle) = Polymarket light --------------------------- */
:root[data-theme="light"]{
  --bg:#ffffff; --bg-surface:#ffffff; --bg-card:#ffffff; --bg-hover:#f4f5f6; --bg-input:#f4f5f6;
  --border:#e6e8ea; --border-light:#caced3;
  --text:#0e0f11; --text-strong:#000000; --text-secondary:#77808d; --text-muted:#aeb4bc;

  --accent:#1652f0; --accent-hover:#0c3ec1;            /* PM brand blue (light) */
  --accent-soft:rgba(22,82,240,0.10); --accent-glow:rgba(22,82,240,0.18);

  --green:#30a159; --green-hover:#237641; --green-soft:rgba(48,161,89,0.14); --green-bg:#ecf9f1;
  --red:#c61d1d;  --red-hover:#951616;  --red-soft:rgba(198,29,29,0.12);  --red-bg:#fcebeb;
  --yellow:#d97706; --yellow-soft:rgba(217,119,6,0.12);

  --shadow-sm:0 1px 2px rgba(16,24,40,0.06); --shadow:0 4px 12px rgba(16,24,40,0.08); --shadow-lg:0 12px 32px rgba(16,24,40,0.12);
  color-scheme:light;
}

/* ---- theme toggle button (injected by pm-theme.js) ------------------------- */
.pm-theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px;cursor:pointer;flex-shrink:0;
  background:var(--bg-hover);border:1px solid var(--border);color:var(--text-secondary);
  font-size:15px;line-height:1;transition:var(--transition);font-family:inherit;
}
.pm-theme-toggle:hover{color:var(--text);border-color:var(--border-light);background:var(--bg-card)}

/* ---- LIGHT-mode polish: dark-built hardcoded white hairlines would vanish on
   white. Re-point the common ones at the token border. (Extended as pages audited.) */
:root[data-theme="light"] .tp-header,
:root[data-theme="light"] .tp-toprow,
:root[data-theme="light"] .pm-ft-wrap,
:root[data-theme="light"] .pm-kpi-cell{ border-color:var(--border); }