/* ============================================================
   OmniVantrex — Theme system (light / dark) + brand wordmarks
   ------------------------------------------------------------
   Link AFTER styles.css, BEFORE home-redesign.css.
   Light is the default (styles.css :root). This file adds the
   dark token set under html[data-theme="dark"], the header text
   wordmarks (corporate vs product), the theme-toggle control,
   and the footer wordmark light/dark swap.
   Token values come from brand Phase-3 §2.3 / §2.4.
   ============================================================ */

:root { color-scheme: light; --steel: #3E5C76; }
html[data-theme="dark"] { color-scheme: dark; }

/* ─── Smooth cross-fade only while toggling (set by JS) ─────── */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition:
    background-color 0.32s ease,
    border-color 0.32s ease,
    color 0.32s ease,
    fill 0.32s ease,
    box-shadow 0.32s ease !important;
}

/* ════════════════════════════════════════════════════════════
   DARK THEME TOKENS
   Re-point the legacy semantic tokens AND the :root --wos-* light
   set to the brand dark values. .band-dark sections already carry
   these values, so they stay consistent; the rest of the page
   flips with them.
   ════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  --t:        #F0F3F7;
  --a:        #7DA3CC;
  --m:        #A3ACB8;
  --b:        #2A3342;
  --s:        #141C28;
  --white:    #1A2230;

  --canvas:   #0E1520;
  --a-hover:  #95B5D7;
  --a-subtle: #1A2536;
  --focus:    #3D6A95;
  --b-strong: #6B7688;
  --steel:    #8FB0D4;

  --good:     #3FA872;
  --bad:      #E5534B;
  --warn:     #E58D1A;
  --good-bg:  #13231b;
  --bad-bg:   #2a1717;
  --warn-bg:  #2a2113;

  --hero-bg:    #0B111A;
  --hero-text:  #F0F3F7;
  --hero-muted: #A3ACB8;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.6);

  /* --wos-* light set → dark values */
  --wos-canvas: #0E1520;
  --wos-surface: #1A2230;
  --wos-surface-2: #242E3E;
  --wos-border: #2A3342;
  --wos-border-strong: #6B7688;
  --wos-text-primary: #F0F3F7;
  --wos-text-secondary: #A3ACB8;
  --wos-text-tertiary: #7A8390;
  --wos-accent: #7DA3CC;
  --wos-accent-hover: #95B5D7;
  --wos-accent-subtle: #1A2536;
  --wos-accent-on: #0E1520;
  --wos-urgent: #D62828;
  --wos-warn: #E58D1A;
  --wos-info: #4AB8B8;
  --wos-ok: #3FA872;
  --wos-trace-stroke: #7A8390;
  --wos-trace-opacity: 0.34;
  --wos-shadow: 0 16px 40px -8px rgba(0,0,0,0.5);
  --wos-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.3);
  --wos-shadow-md: 0 4px 12px -2px rgba(0,0,0,0.4);
}

/* ─── Dark-theme component patches (hardcoded-light spots) ──── */
html[data-theme="dark"] .outcome-card {
  background: var(--white);
  border-color: var(--b);
}
html[data-theme="dark"] .outcome-card strong::before { box-shadow: none; }

/* Light-context buttons: dark text on the lightened accent fill */
html[data-theme="dark"] .btn:not(.btn--outline) {
  background: var(--a);
  color: var(--wos-accent-on);
  border-color: var(--a);
}
html[data-theme="dark"] .btn:not(.btn--outline):hover {
  background: var(--a-hover);
  color: var(--wos-accent-on);
  border-color: var(--a-hover);
}
html[data-theme="dark"] .btn--outline {
  color: var(--t);
  border-color: var(--b-strong);
}
html[data-theme="dark"] .btn--outline:hover {
  background: var(--white);
  color: var(--t);
  border-color: var(--t);
}
html[data-theme="dark"] .nav .nav-cta { color: var(--wos-accent-on); }
html[data-theme="dark"] .nav .nav-cta:hover { color: var(--wos-accent-on); }

/* Dark-section helpers that hardcode white in light mode keep working;
   in dark theme normal sections shouldn't force white buttons. Scope the
   white-button rule to genuine .band-dark / .section--dark only — it
   already is in styles.css, so nothing to undo here. */

/* ════════════════════════════════════════════════════════════
   HEADER — text wordmarks (theme-adaptive) + actions cluster
   ════════════════════════════════════════════════════════════ */
.sitehead > .content {
  justify-content: flex-start;
  gap: var(--sp-lg);
}
.brand { margin-right: auto; }

.brandlink {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}
.brandlink .wm {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -0.012em;
  color: var(--t);
  display: inline-flex;
  align-items: baseline;
}
.brandlink .wm-os { color: var(--a); margin-left: 0.32ch; }

/* Corporate lockup — OMNIVANTREX over centered SYSTEMS, per the
   Brand Usage Spec (stacked, SYSTEMS cap 0.42×H, gap 0.32×H,
   SYSTEMS tracking +0.18em). Live Inter text so it themes. */
.brandlink .wm-corp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  line-height: 1;
}
.brandlink .wm-omni {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 24.5px;
  letter-spacing: 0;
  color: var(--t);
}
.brandlink .wm-systems {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 10.3px;
  letter-spacing: 0.18em;
  color: var(--steel);
}

.head-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ─── Theme toggle button ─────────────────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--b);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--m);
  cursor: pointer;
  transition: color 0.18s var(--ease-out), border-color 0.18s var(--ease-out), background 0.18s var(--ease-out);
}
.theme-toggle:hover {
  color: var(--t);
  border-color: var(--b-strong);
  background: var(--a-subtle);
}
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .ic-moon { display: block; }
.theme-toggle .ic-sun  { display: none; }
html[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
html[data-theme="dark"] .theme-toggle .ic-sun  { display: block; }

/* ════════════════════════════════════════════════════════════
   FOOTER — endorsement wordmark swap by theme
   ════════════════════════════════════════════════════════════ */
.foot-brand .wm-dark { display: none; }
html[data-theme="dark"] .foot-brand .wm-light { display: none; }
html[data-theme="dark"] .foot-brand .wm-dark { display: inline-block; }

/* ─── Header brand lockup: full "Workflow OS by OmniVantrex" on desktop,
   compact "Workflow OS" on phones; light/dark variants swap by theme. ─── */
.sitehead .brandlink img { width: auto; display: none; }
.sitehead .brandlink .wm-full { height: 34px; }
.sitehead .brandlink .wm-compact { height: 22px; }
html[data-theme="light"] .sitehead .brandlink .wm-full-light { display: block; }
html[data-theme="dark"]  .sitehead .brandlink .wm-full-dark  { display: block; }
@media (max-width: 560px) {
  html[data-theme="light"] .sitehead .brandlink .wm-full-light,
  html[data-theme="dark"]  .sitehead .brandlink .wm-full-dark { display: none; }
  html[data-theme="light"] .sitehead .brandlink .wm-compact-light { display: block; }
  html[data-theme="dark"]  .sitehead .brandlink .wm-compact-dark  { display: block; }
}

/* Mobile: keep the toggle beside the hamburger */
@media (max-width: 900px) {
  .js-nav .head-actions { order: 3; }
}

/* Phones: corporate masthead drops to OMNIVANTREX alone (Brand Spec §5 —
   below 180px width, SYSTEMS is removed) and scales down to avoid crowding
   the toggle + hamburger. */
@media (max-width: 560px) {
  .brandlink .wm-omni { font-size: 20px; }
  .brandlink .wm-systems { display: none; }
}