/* Night mode of the public site (index, login, stories, story): <html data-theme="dark">, set by the
   sun/moon button in the header (common.js) and remembered in this browser. Day is the default here;
   the dashboard pages have their own two modes in vision.css. Load after the page's other styles.

   The site's colour variables are redefined, then each surface that intum.css, stories.css and
   dashboard.css paint white by name is given the night surface. */
[data-theme="dark"] {
  --ink: #e8eef6; --text: #b8c4d3; --muted: #8b98aa; --line: #223047; --bg-soft: #0e1828;
  --blue-soft: rgba(0, 113, 227, .18); --shadow: 0 8px 28px rgba(0, 0, 0, .4);
  --surface: #131f31;
  color-scheme: dark;
}
[data-theme="dark"] body { background: #0a1320; }

/* Header */
[data-theme="dark"] .header { background: rgba(10, 19, 32, .95); }
[data-theme="dark"] .header.scrolled { box-shadow: 0 2px 16px rgba(0, 0, 0, .45); }
[data-theme="dark"] .logo img { content: url("../images/intum-logo-white.png"); }
[data-theme="dark"] .dropdown { background: var(--surface); }
[data-theme="dark"] .lang-switch button.active { background: var(--blue); color: #fff; }
@media (max-width: 960px) {
  [data-theme="dark"] .nav { background: #0a1320; }
}

/* Buttons that turn white or ink on hover */
[data-theme="dark"] .btn-ghost:hover { color: #0f1b2d; }
[data-theme="dark"] .cta-band .btn-primary:hover { background: #0b1726; color: #fff; }

/* Cards and panels */
[data-theme="dark"] .cat-strip .grid, [data-theme="dark"] .tab, [data-theme="dark"] .product, [data-theme="dark"] .pmodal,
[data-theme="dark"] .tech-card, [data-theme="dark"] .net-stat, [data-theme="dark"] .net-how, [data-theme="dark"] .net-steps .num,
[data-theme="dark"] .net-reach, [data-theme="dark"] .cov-panel, [data-theme="dark"] .net-uses .chip, [data-theme="dark"] .partner,
[data-theme="dark"] .story-card, [data-theme="dark"] .story-stat, [data-theme="dark"] .story-facts,
[data-theme="dark"] .notice, [data-theme="dark"] .auth-card, [data-theme="dark"] .more-btn {
  background: var(--surface);
}
[data-theme="dark"] .solutions-tabs .tab { background: none; }
[data-theme="dark"] .tab.active { background: var(--blue); }
[data-theme="dark"] .net-steps .active .num { background: var(--blue); }
[data-theme="dark"] .net-steps button.active { border-color: rgba(0, 113, 227, .4); }
[data-theme="dark"] .pmodal { box-shadow: 0 24px 64px rgba(0, 0, 0, .6); }
[data-theme="dark"] .pm-close { background: rgba(19, 31, 49, .92); }
[data-theme="dark"] .pm-close:hover { background: var(--surface); }
/* Product renders are cut out on transparency, drawn for a light background: keep it light behind them */
[data-theme="dark"] .product-img.cutout, [data-theme="dark"] .pm-img.cutout, [data-theme="dark"] .solution-img.cutout { background: #e9eef5; }
[data-theme="dark"] .solution-img.cutout { border-color: transparent; }

/* Coverage */
[data-theme="dark"] .reach-place text { stroke: var(--surface); }
[data-theme="dark"] .cov-search input:focus { background: var(--surface); }
[data-theme="dark"] .cov-result.ok { background: rgba(22, 163, 74, .16); color: #6ee7a0; }
[data-theme="dark"] .cov-result.no { background: rgba(242, 107, 33, .16); color: #ffb08a; }

/* Stories */
[data-theme="dark"] .story-img { background: linear-gradient(135deg, #14243a, #1a2a42); }
[data-theme="dark"] .story-draft { background: rgba(255, 181, 71, .16); color: #ffc46b; }

/* Sign in and forms */
[data-theme="dark"] .auth-tabs button.active { background: var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
[data-theme="dark"] .field input { background: #0e1828; color: var(--ink); }
[data-theme="dark"] .form-error { background: rgba(220, 38, 38, .16); color: #ff8a8a; }

/* Footer: a shade darker than the page so it still reads as the end */
[data-theme="dark"] .footer { background: #070e19; }