/* Shared site theme — homepage + product widgets (2026-10-18). */
:root[data-mj-theme="home"],
.mj-root.mj-root,
.mj-auto.mj-auto {
  --bg: #001b2b;
  --bg-deep: #001723;
  --alternate: #002331;
  --surface: #002331;
  --surface-2: #163546;
  --surface-3: #1c4052;
  --line: #285467;
  --line-strong: #51b6ce;
  --accent: #46cce3;
  --accent-soft: #76e0f0;
  --accent-dark: #002335;
  --cyan: var(--accent);
  --text: #f0f7fa;
  --text-2: #c1d2da;
  --muted: #aec2cb;
  --amber: #ffbd69;
  --site-grid-size: 56px;
  --site-grid-color: rgba(70, 204, 227, 0.045);
  --site-grid-image:
    linear-gradient(var(--site-grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--site-grid-color) 1px, transparent 1px);
}

/* Paint only page backgrounds; cards, forms and product demos keep their surfaces.
   Extra root specificity survives the base stylesheet's background shorthand. */
.mj-root.mj-root.mj-root,
.mj-auto.mj-auto.mj-auto,
:root[data-mj-theme="home"] :is(.site-header, .footer),
:root[data-mj-theme="home"] .home-sections > section {
  background-image: var(--site-grid-image);
  background-size: var(--site-grid-size) var(--site-grid-size);
  background-position: top right;
}

/* Shared appearance controls; their accessible action text follows the root mode.
   CSS drives both icons and names so React never hydrates mutated header markup. */
:root[data-mj-theme="home"] { color-scheme: dark; }
.site-identity { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.theme-toggle { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--cyan); cursor: pointer; }
.theme-toggle svg { display: block; width: 22px; height: 22px; }
.theme-toggle:hover { background: var(--surface-2); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
:root[data-mj-theme="home"] :is(.button, .mj-root a.mj-btn) { transition-property: transform, box-shadow; }
.theme-for-dark { display: block; }
.theme-for-light { display: none; }
:root[data-color-mode="light"] .theme-for-dark { display: none; }
:root[data-color-mode="light"] .theme-for-light { display: block; }
.theme-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 700px) { .nav { gap: 12px; } .site-identity { gap: 10px; } }
@media (max-width: 360px) { .site-identity { gap: 8px; } .site-identity .wordmark img { max-width: 43vw; } }

/* Approved cool light palette. Repeat the root-scoped tokens for kit sections,
   whose explicit local dark tokens would otherwise prevent inheritance. */
:root[data-mj-theme="home"][data-color-mode="light"],
:root[data-color-mode="light"] .mj-root.mj-root,
:root[data-color-mode="light"] .mj-auto.mj-auto {
  --bg: #f7fafc;
  --bg-deep: #e7eff4;
  --alternate: #edf4f7;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #e2edf2;
  --line: #c4d5df;
  --line-strong: #7ca6b5;
  --accent: #087184;
  --accent-soft: #066579;
  --accent-dark: #ffffff;
  --cyan: var(--accent);
  --text: #102f42;
  --text-2: #3d5869;
  --muted: #526b7b;
  --amber: #8a5100;
  --site-grid-color: rgba(31, 97, 122, .055);
  --bg2: var(--alternate);
  --panel: var(--surface-2);
  --panel2: var(--surface-3);
  --accent2: var(--accent-soft);
  --warm: var(--amber);
  --shadow: 0 20px 60px rgba(16, 47, 66, .08);
  --mj-ink: var(--text);
  --mj-secondary: var(--text-2);
  --mj-muted: var(--muted);
  --mj-inverse: var(--accent-dark);
  --mj-accent-ink: var(--accent);
  --mj-danger: #b42318;
  --mj-warning: #8a5100;
  --mj-success: #176944;
  --mj-panel-rgb: 255, 255, 255;
  --mj-deep-rgb: 231, 239, 244;
  --mj-wash-rgb: 16, 47, 66;
  --mj-accent-rgb: 8, 113, 132;
  --mj-line-rgb: 82, 107, 123;
  --mj-shadow-rgb: 16, 47, 66;
  --mj-shadow-strength: .22;
  --mj-panel-fill: var(--surface);
  --mj-muted-fill: #dbe5ea;
  color-scheme: light;
}

/* Homepage literal-color compatibility; keep the accepted dark composition. */
:root[data-color-mode="light"] :is(.text-link, .audience-card p, .contact-form label) { color: var(--text-2); }
:root[data-color-mode="light"] :is(.hero-note, .contact-caption, .form-note, .footer p) { color: var(--muted); }
:root[data-color-mode="light"] .about-copy strong { color: var(--text); }
:root[data-color-mode="light"] :is(.service-card .text-link, .about-copy .text-link, .text-link:hover) { color: var(--cyan); }
:root[data-color-mode="light"] :is(input, textarea, select) { border-color: #7893a2; }
:root[data-color-mode="light"] :is(input, textarea)::placeholder { color: var(--muted); }
:root[data-color-mode="light"] .service-option input:checked + span { background: var(--surface-3); }
:root[data-color-mode="light"] .audience-card { background: var(--surface); box-shadow: inset 0 0 0 5px var(--bg), inset 0 0 0 6px var(--line); }
:root[data-color-mode="light"] .service-card { background: var(--surface); }
:root[data-color-mode="light"] .audience-neon { filter: none; }
:root[data-color-mode="light"] .audience-neon::before { background: conic-gradient(from calc(var(--audience-neon-angle) + var(--neon-start-angle, 65deg) + 6deg), transparent 0deg 280deg, rgba(8,113,132,.12) 300deg, var(--cyan) 338deg, #004557 354deg, transparent 360deg); }
:root[data-color-mode="light"] .field-error { color: #b42318; }
:root[data-color-mode="light"] .form-success { color: #176944; }
:root[data-color-mode="light"] .mj-root .mj-chip:is(.is-done, .is-live) { color: #055c6c; }
:root[data-color-mode="light"] .skip-link { color: #ffffff; }
:root[data-color-mode="light"] .wordmark { background: var(--text); mask: url('/images/brand-wordmark.webp') center / contain no-repeat; }
:root[data-color-mode="light"] .wordmark img { opacity: 0; }
@media (max-width: 700px) { :root[data-color-mode="light"] .nav-links { background: var(--surface); } }

/* Error pages still offer the same brand identity and theme action. */
.error-page .site-header { position: relative; }
.error-page main { max-width: 640px; margin: 12vh auto; padding: 24px; line-height: 2; }