/* ════════════════════════════════════════════════════════════════
   toca.io · dark mode, the default since 10 Nov 2026 (Mat; on trial from 9 Nov).
   The switch in the top strip gives paper to anyone who prefers it, and is remembered.
   The navy is news.toca.io's customer stories palette (news.css, body.dark),
   so the two sites read as one family. Pink stays the only accent.
   Every tinted band (.band--tint) becomes a bone island: the light tokens are
   declared again inside it, so what is in it renders exactly as on paper and
   breaks the navy into chapters.
   Active while <html data-theme="dark">, which gen.py's head() writes on every
   toca.io page; THEME_BOOT takes it off before first paint for a visitor who
   chose light. The law-firm pages (body.legal) never get the attribute: they
   keep toca.legal's look.
   ════════════════════════════════════════════════════════════════ */

/* ── Tokens: news.toca.io's navy ─────────────────────────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-paper:   #0b1020;        /* the page */
  --color-paper-2: #121933;        /* tinted panels: the CTA band, chips on hover */
  --color-paper-3: #141c3a;        /* cards and tiles: the page lifted one step */
  --color-rule:    #283157;        /* hairlines */
  --color-ink:     #f4f3ee;        /* headings */
  --color-ink-2:   #d9dbe6;        /* reading text */
  --color-muted:   #9aa3c4;        /* labels, sources, kickers */
  --color-accent-text: #ff4d86;    /* pink as text, lifted to clear 4.5:1 on navy */
  --color-accent-deep: #ff6f9c;
  --color-focus:   #ff4d86;
  --chart-dim:    rgba(154,163,196,.45);
  --chart-marker: rgba(244,243,238,.45);
  --dk-shadow: rgba(2,4,12,.6);
  --dk-card: linear-gradient(180deg, #161f42, #121a37);   /* news.toca.io's tile */
  --dk-card-hover: #4a557f;
}

/* ── Bone islands: the tinted bands keep the paper palette ───────── */
[data-theme="dark"] .band--tint {
  color-scheme: light;
  --color-paper:   #faf7f1;
  --color-paper-2: #f1ebe0;
  --color-paper-3: #fffdf8;
  --color-ink:     #2b2117;
  --color-ink-2:   #52453a;
  --color-muted:   #6f6152;
  --color-rule:    #ddd2c1;
  --color-accent-text: #c2185b;
  --color-accent-deep: #ad1457;
  --color-focus:   #c2185b;
  --chart-dim:    rgba(111,97,82,.45);
  --chart-marker: rgba(43,33,23,.45);
  --dk-shadow: rgba(43,33,23,.3);
  --dk-card: var(--color-paper-3);
  --dk-card-hover: var(--color-muted);
  background: #f4efe6;   /* bone, a shade under paper so the cards inside still lift */
  color: var(--color-ink);
  border-top: 0;
}
/* a navy band after a bone one starts clean; the hairline seam is for paper on paper */
[data-theme="dark"] .band--tint + .cta-band { border-top: 0; }

/* ── Chrome ──────────────────────────────────────────────────────── */
[data-theme="dark"] .announce { background: #1a2347; border-bottom: var(--rule-hair) solid var(--color-rule); }   /* the page lifted, not the paper bar's brown */
[data-theme="dark"] .family { background: var(--color-paper-2); }
[data-theme="dark"] .menu { box-shadow: 0 18px 40px -14px var(--dk-shadow); }
[data-theme="dark"] .chip--solid:hover { background: #d81b60; border-color: #d81b60; }
[data-theme="dark"] .form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239aa3c4' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); }
[data-theme="dark"] .cta-band { background: var(--color-paper-2); }
[data-theme="dark"] .totop, [data-theme="dark"] .cx-launch { box-shadow: 0 10px 30px -10px var(--dk-shadow); }
[data-theme="dark"] .cx { box-shadow: 0 24px 60px -20px var(--dk-shadow); }

/* ── Cards lift off the navy the way news.toca.io's tiles do ─────── */
[data-theme="dark"] :is(.tile, .news-lead, .news-card, .io-product) { background: var(--dk-card); }
[data-theme="dark"] :is(.tile, .news-lead, .news-card, .io-product):hover { border-color: var(--dk-card-hover); }
[data-theme="dark"] :is(.tile--here, .io-product--lead) { border-color: var(--color-accent); }
[data-theme="dark"] :is(.tx-frame, .p2-frame) { box-shadow: 0 24px 60px -30px var(--dk-shadow); }
[data-theme="dark"] .console .shot { box-shadow: 0 0 0 1px var(--color-rule), 0 18px 40px -24px var(--dk-shadow); }

/* ── Customer marks: one ink, so on navy they turn to light ──────── */
[data-theme="dark"] .proof-bar--logos img.logo { filter: brightness(0) invert(.94); }
[data-theme="dark"] .band--tint .proof-bar--logos img.logo { filter: none; }
[data-theme="dark"] .co-map iframe { filter: saturate(.6) brightness(.85); }

/* ── Drawings: tools/*_art.py, sovereign_boundary.py and spectral_prism.py write
   the paper palette as fixed colours. CSS outranks a presentation attribute, so
   each one is pointed back at its token: navy outside, paper inside a bone band. ── */
[data-theme="dark"] :is(.hero-art, .routes-fig, .prism-svg, #sv) :is([fill="#2b2117" i]) { fill: var(--color-ink); }
[data-theme="dark"] :is(.hero-art, .routes-fig, .prism-svg, #sv) :is([stroke="#2b2117" i]) { stroke: var(--color-ink); }
[data-theme="dark"] :is(.hero-art, .routes-fig, .prism-svg, #sv) :is([fill="#52453a" i]) { fill: var(--color-ink-2); }
[data-theme="dark"] :is(.hero-art, .routes-fig, .prism-svg, #sv) :is([stroke="#52453a" i]) { stroke: var(--color-ink-2); }
[data-theme="dark"] :is(.hero-art, .routes-fig, .prism-svg, #sv) :is([fill="#6f6152" i], [fill="#8a7d6b" i]) { fill: var(--color-muted); }
[data-theme="dark"] :is(.hero-art, .routes-fig, .prism-svg, #sv) :is([stroke="#6f6152" i]) { stroke: var(--color-muted); }
[data-theme="dark"] :is(.hero-art, .routes-fig, .prism-svg, #sv) :is([fill="#faf7f1" i]) { fill: var(--color-paper); }
[data-theme="dark"] :is(.hero-art, .routes-fig, .prism-svg, #sv) :is([stroke="#faf7f1" i]) { stroke: var(--color-paper); }
[data-theme="dark"] :is(.hero-art, .routes-fig, .prism-svg, #sv) :is([fill="#fffdf8" i]) { fill: var(--color-paper-3); }
[data-theme="dark"] :is(.hero-art, .routes-fig, .prism-svg, #sv) :is([fill="#f1ebe0" i]) { fill: var(--color-paper-2); }
[data-theme="dark"] :is(.hero-art, .routes-fig, .prism-svg, #sv) :is([fill="#ddd2c1" i], [fill="#e6dccb" i]) { fill: var(--color-rule); }
[data-theme="dark"] :is(.hero-art, .routes-fig, .prism-svg, #sv) :is([stroke="#ddd2c1" i]) { stroke: var(--color-rule); }
[data-theme="dark"] :is(.hero-art, .routes-fig, .prism-svg, #sv) :is([fill="#c2185b" i]) { fill: var(--color-accent-text); }
[data-theme="dark"] :is(.hero-art, .routes-fig, .prism-svg, #sv) :is([stroke="#c2185b" i]) { stroke: var(--color-accent-text); }
[data-theme="dark"] :is(.hero-art, .routes-fig, .prism-svg, #sv) :is([fill="#fbe9ef" i]) { fill: color-mix(in srgb, var(--color-accent) 22%, var(--color-paper)); }