/* Dark theme, shared by every page. site.css and app-shell.css @import it;
   login, signup and 404 (which use neither) link it directly.

   theme.js sets <html data-theme="light|dark"> before first paint, from the
   visitor's stored choice or else their OS setting. Every dark rule keys off
   that attribute rather than the media query, so there is one switch.

   How the pages stay themeable:
     * Colour lives in the tokens below. `:root[data-theme="dark"]` outranks a
       page's own `:root { … }` block whatever the load order, so a page that
       redefines a token in its inline <style> is still overridden here.
     * Text on a teal fill uses --on-accent, never #fff: the dark-mode teal is
       light enough to read as link text on the dark ground, which makes it too
       light to carry white text.
     * Translucent ink, teal and cream are written rgba(var(--ink-rgb), 0.06)
       and so on, so one alpha works on either ground.
     * Every other text colour in the pages (verdict greens, risk ambers,
       source-brand blues…) is a --c-<hex> token named after its light value.
       Its dark value is the same hue lifted to 5.5:1 on the dark surface; the
       two pale fills (--c-cbd5d1, --c-fffbeb) are sunk to dark ones instead.
       A new text colour in a page wants a token here too, or it will be
       unreadable in dark mode.
   The exported PDF is rendered server-side and never sees any of this. */

:root {
  --surface: #ffffff;
  --on-accent: #ffffff;
  /* Text on an --ink fill (selected chips and tabs). */
  --on-ink: #ffffff;
  --ink-rgb: 20, 33, 30;
  --accent-rgb: 13, 124, 114;
  --muted-rgb: 95, 115, 110;
  --bg-rgb: 242, 236, 223;
  --paper-rgb: 255, 255, 255;

  /* The mint wash behind score bands and highlight cards. */
  --wash-a: #e0efec;
  --wash-b: #f0f6f4;
  --wash-line: #c4d9d4;
  --wash-ink: #0f4f49;

  /* A tint of the ink, for hover fills and faint wells on the light ground. */
  --ink-tint: rgba(20, 33, 30, 0.04);
  --ink-tint-2: rgba(20, 33, 30, 0.06);
  /* The cream nav glass. */
  --glass: rgba(242, 236, 223, 0.78);
  --shadow-soft: rgba(20, 33, 30, 0.07);
  /* Card lift: the top-edge highlight and the soft drop below. */
  --hl: rgba(255, 255, 255, 0.7);
  --shadow-card: rgba(20, 33, 30, 0.04);

  --c-000000: #000000;
  --c-003087: #003087;
  --c-0369a1: #0369a1;
  --c-047857: #047857;
  --c-059669: #059669;
  --c-065f46: #065f46;
  --c-0891b2: #0891b2;
  --c-0a6b63: #0a6b63;
  --c-0b5f59: #0b5f59;
  --c-0d9488: #0d9488;
  --c-0e2439: #0e2439;
  --c-0e7490: #0e7490;
  --c-0f2d26: #0f2d26;
  --c-0f766e: #0f766e;
  --c-1434cb: #1434cb;
  --c-181717: #181717;
  --c-1d4ed8: #1d4ed8;
  --c-2a7a5a: #2a7a5a;
  --c-334155: #334155;
  --c-4338ca: #4338ca;
  --c-475569: #475569;
  --c-5f6368: #5f6368;
  --c-64748b: #64748b;
  --c-6b4a1d: #6b4a1d;
  --c-6d28d9: #6d28d9;
  --c-7a4d17: #7a4d17;
  --c-7a4f1a: #7a4f1a;
  --c-7c3aed: #7c3aed;
  --c-8a5a1e: #8a5a1e;
  --c-8f2a2a: #8f2a2a;
  --c-92400e: #92400e;
  --c-9a3412: #9a3412;
  --c-a83232: #a83232;
  --c-a8563a: #a8563a;
  --c-b06a24: #b06a24;
  --c-b42318: #b42318;
  --c-b45309: #b45309;
  --c-b91c1c: #b91c1c;
  --c-b92b27: #b92b27;
  --c-b93a3a: #b93a3a;
  --c-be185d: #be185d;
  --c-cbd5d1: #cbd5d1;
  --c-dc2626: #dc2626;
  --c-e2e8f0: #e2e8f0;
  --c-e9e3d5: #e9e3d5;
  --c-ff0000: #ff0000;
  --c-fffbeb: #fffbeb;
}

:root[data-theme="dark"] {
  --bg: #0e1816;
  --bg-2: #13211e;
  --surface: #172522;
  --border: #2a3b37;
  --ink: #eef5f2;
  --text: #d3e0dc;
  --muted: #95aba5;
  --line: rgba(226, 240, 235, 0.10);
  --line-strong: rgba(226, 240, 235, 0.20);
  --accent: #2fb8a7;
  --accent-ink: #5ed3c4;
  --accent-dim: rgba(47, 184, 167, 0.10);
  --accent-soft: rgba(47, 184, 167, 0.12);
  --accent-glow: rgba(47, 184, 167, 0.20);
  --pill-bg: rgba(47, 184, 167, 0.12);
  --on-accent: #04211d;
  --on-ink: #0e1816;
  --navy: #0a1f1b;
  --orange: #fb923c;
  --red: #f87171;
  --green: #34d399;

  --ink-rgb: 226, 240, 235;
  --accent-rgb: 47, 184, 167;
  --muted-rgb: 149, 171, 165;
  --bg-rgb: 14, 24, 22;
  --paper-rgb: 23, 37, 34;

  --wash-a: #12302b;
  --wash-b: #152622;
  --wash-line: #24443e;
  --wash-ink: #c4ede6;

  --sidebar-bg: #0b1715;
  --sidebar-bg-2: #08110f;
  --sidebar-border: rgba(255, 255, 255, 0.07);

  --ink-tint: rgba(226, 240, 235, 0.05);
  --ink-tint-2: rgba(226, 240, 235, 0.08);
  --glass: rgba(19, 33, 30, 0.80);
  --shadow-soft: rgba(0, 0, 0, 0.35);
  --hl: rgba(255, 255, 255, 0.03);
  --shadow-card: rgba(0, 0, 0, 0.22);

  --c-000000: #999999;
  --c-003087: #6a99ee;
  --c-0369a1: #23a1e7;
  --c-047857: #14b083;
  --c-059669: #14b080;
  --c-065f46: #13ae82;
  --c-0891b2: #17a9cc;
  --c-0a6b63: #13aea1;
  --c-0b5f59: #14ada2;
  --c-0d9488: #13ac9f;
  --c-0e2439: #5f9dd8;
  --c-0e7490: #17a7ce;
  --c-0f2d26: #39ab91;
  --c-0f766e: #16aca1;
  --c-1434cb: #8295f1;
  --c-181717: #9c9797;
  --c-1d4ed8: #7897ed;
  --c-2a7a5a: #3bab7e;
  --c-334155: #889cb8;
  --c-4338ca: #9791e2;
  --c-475569: #8a9ab0;
  --c-5f6368: #94999e;
  --c-64748b: #8e9bae;
  --c-6b4a1d: #c98c39;
  --c-6d28d9: #ae87ea;
  --c-7a4d17: #d7882a;
  --c-7a4f1a: #d2882d;
  --c-7c3aed: #ae87f2;
  --c-8a5a1e: #d28b31;
  --c-8f2a2a: #da8282;
  --c-92400e: #e97a37;
  --c-9a3412: #eb7750;
  --c-a83232: #d98080;
  --c-a8563a: #ce8870;
  --c-b06a24: #d68636;
  --c-b42318: #ec786f;
  --c-b45309: #e87d2c;
  --c-b91c1c: #ea7575;
  --c-b92b27: #e57a74;
  --c-b93a3a: #d88181;
  --c-be185d: #ed6ea3;
  --c-cbd5d1: #2e3934;
  --c-dc2626: #e97979;
  --c-e2e8f0: #1a2432;
  --c-e9e3d5: #39301e;
  --c-ff0000: #f07575;
  --c-fffbeb: #2d2711;

  color-scheme: dark;
}

/* The black brand marks show their white files on the dark ground. theme.js
   swaps the src once the DOM exists; this paints the right file before that. */
:root[data-theme="dark"] img[src*="Squsha_logo_black"] { content: url('media/Squsha_logo_white.webp'); }
:root[data-theme="dark"] img[src*="Squsha_text_black_trimmed"] { content: url('media/Squsha_text_white_trimmed.webp'); }

:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.24); }
:root[data-theme="dark"] ::selection { background: rgba(47, 184, 167, 0.30); }

/* ── The toggle ─────────────────────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
}
.theme-toggle__icon { display: inline-flex; font-style: normal; flex-shrink: 0; }
.theme-toggle__icon svg { width: 18px; height: 18px; display: block; }

/* Marketing nav: an icon pill beside the CTA. */
.theme-toggle--nav {
  /* No taller than the CTA beside it, so the nav pill keeps its height. */
  width: 32px; height: 32px;
  border-radius: 999px;
  color: var(--muted);
  transition: color 0.2s, background 0.2s;
}
.theme-toggle--nav:hover { color: var(--ink); background: var(--ink-tint-2); }
/* The nav hides every item but the CTA on phones; the toggle stays. */
@media (max-width: 700px) {
  nav ul li.theme-li { display: list-item; }
}

/* Pages with no nav to sit in (404, the client portal). */
.theme-toggle--float {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 300;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  box-shadow: 0 8px 24px var(--shadow-soft);
  transition: transform 0.15s, background 0.2s;
}
.theme-toggle--float:hover { transform: translateY(-1px); }

@media print {
  .theme-toggle, .theme-li { display: none !important; }
}