/* Shared dark/light theming for the marketing site. The pages define the dark
   palette inline; this file overrides those same CSS variables when the root
   carries data-theme="light" (set by theme.js / the inline head snippet). The
   attribute selector outranks the pages' `:root {}`, so load order doesn't matter. */
:root[data-theme="light"] {
  color-scheme: light;
  --ink:   #f4f7fb;
  --ink-1: #ffffff;
  --ink-2: #eef2f8;
  --ink-3: #e4ebf4;
  --line:   #dde5f0;
  --line-2: #c6d2e2;
  --text:  #101a2b;
  --muted: #53637a;
  --faint: #7d8da0;
  --bio:     #0aa877;
  --bio-2:   #0c8f66;
  --bio-dim: #a7e3cf;
  --bio-glow: rgba(10, 168, 119, 0.22);
  --amber: #c47d18;
  --red:   #cf4444;
}

/* Frosted nav / topbar backgrounds are hard-coded dark on the pages — flip them. */
:root[data-theme="light"] nav.scrolled { background: rgba(255, 255, 255, 0.82); border-bottom-color: var(--line); }
:root[data-theme="light"] .topbar { background: rgba(255, 255, 255, 0.85); }
:root[data-theme="light"] thead th { background: var(--ink-1); }
:root[data-theme="light"] .searchbox { box-shadow: 0 10px 30px -20px rgba(20, 40, 80, 0.35); }
/* Home hero: soften the dark-tuned SCADA scene so it doesn't read as heavy on white. */
:root[data-theme="light"] .hero-scada { opacity: 0.9; }

/* Theme toggle button (added to each nav). */
.navright { display: flex; align-items: center; gap: 10px; }
.tglbtn {
  background: transparent; border: 1px solid var(--line-2); color: var(--muted);
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer; font-size: 15px; line-height: 1;
  display: inline-grid; place-items: center; transition: color .2s, border-color .2s, background .2s;
}
.tglbtn:hover { color: var(--bio); border-color: var(--bio); }

/* Secondary "Sign in" button that sits beside the primary CTA in the nav. */
.btn-signin {
  display: inline-flex; align-items: center; font-weight: 600; font-size: 14px;
  padding: 9px 16px; border-radius: 10px; border: 1px solid var(--line-2);
  color: var(--text); background: transparent; white-space: nowrap;
  transition: border-color .2s, color .2s;
}
.btn-signin:hover { border-color: var(--bio); color: var(--bio); }