/* ── THEME TOKENS (dark / light) + HH bridge vars ─────────────────── */

html[data-theme="dark"] {
  --font-display: "Unbounded", sans-serif;
  --font-mono: "DM Mono", monospace;
  /* Granite-style layered greys (body uses gradient + fallback) */
  --c-bg: #22232c;
  --c-bg-gradient: radial-gradient(
      ellipse 110% 90% at 8% -15%,
      #383a48 0%,
      transparent 58%
    ),
    radial-gradient(ellipse 85% 75% at 92% 108%, #2e303a 0%, transparent 52%),
    radial-gradient(ellipse 60% 50% at 48% 42%, #2a2c35 0%, transparent 72%),
    linear-gradient(168deg, #2c2e38 0%, #1f2028 38%, #262830 72%, #1c1d24 100%);
  --c-surface: rgba(255, 255, 255, 0.055);
  --c-border: rgba(190, 198, 210, 0.14);
  /* Soft off-white body copy; muted = lighter grey (not as dim as before) */
  --c-text: #f0f2f7;
  --c-muted: rgba(215, 220, 230, 0.78);
  --c-accent1: #a8b4c0;
  --c-accent2: #7a8796;
  --c-accent3: #8b9cb0;
  --c-noise: 0.032;
  --c-aurora-strength: 0.11;
  --c-aurora-1: #5c6674;
  --c-aurora-2: #4e5662;
  --c-aurora-3: #6a7484;
  --c-divider-mid: rgba(160, 170, 185, 0.2);
  --c-spotlight-inner: rgba(170, 178, 192, 0.14);
  --c-spotlight-mid: rgba(100, 110, 128, 0.08);
  /* Hero spotlights (welcome — toward HH mark) */
  --c-floor-spot-strength: 0.88;
  --c-floor-spot-core: rgba(242, 246, 255, 0.52);
  --c-floor-spot-edge: rgba(168, 182, 204, 0.32);
  /* hh-logo mark (simple mode uses --hh-brand for SVG fill) */
  --hh-brand: #f2f4f8;
  --hh-name: rgba(255, 255, 255, 0.94);
}

html[data-theme="light"] {
  --font-display: "Unbounded", sans-serif;
  --font-mono: "DM Mono", monospace;
  --c-bg: #e2e4ec;
  --c-bg-gradient: radial-gradient(
      ellipse 100% 85% at 12% -10%,
      #f4f5f9 0%,
      transparent 55%
    ),
    radial-gradient(ellipse 80% 70% at 88% 100%, #d8dbe6 0%, transparent 50%),
    linear-gradient(165deg, #eceef4 0%, #e0e3eb 45%, #e8eaf2 100%);
  --c-surface: rgba(255, 255, 255, 0.72);
  --c-border: rgba(15, 15, 25, 0.12);
  --c-text: #2a2d38;
  --c-muted: rgba(58, 62, 76, 0.72);
  --c-accent1: #0d7a5c;
  --c-accent2: #b30d9a;
  --c-accent3: #0b5cad;
  --c-noise: 0.028;
  --c-aurora-strength: 0.12;
  --c-aurora-1: #9aacbd;
  --c-aurora-2: #b0a4c2;
  --c-aurora-3: #a3b5cc;
  --c-divider-mid: rgba(15, 15, 25, 0.15);
  --c-spotlight-inner: rgba(40, 90, 140, 0.1);
  --c-spotlight-mid: rgba(30, 70, 120, 0.05);
  --c-floor-spot-strength: 0.78;
  --c-floor-spot-core: rgba(255, 255, 255, 0.52);
  --c-floor-spot-edge: rgba(95, 125, 175, 0.28);
  --hh-brand: #16181d;
  --hh-name: rgba(22, 24, 32, 0.88);
}

/* ── Bridge: Antigravity / brm.us reference tokens → Heissers --c-* ─ */
html[data-theme="dark"],
html[data-theme="light"] {
  --theme-surface-surface: var(--c-bg);
  --theme-surface-on-surface: var(--c-text);
  --theme-surface-on-surface-variant: var(--c-muted);
  --theme-surface-surface-container-higher: color-mix(in srgb, var(--c-border) 55%, transparent);
  --theme-outline-variant: var(--c-border);
  --theme-primary-primary: var(--c-text);
  --theme-primary-on-primary: var(--c-bg);
  --theme-secondary-button: color-mix(in srgb, var(--c-surface) 90%, var(--c-text) 5%);
  --theme-nav-button-hover: var(--c-surface);
  --theme-button-states-hovered: var(--c-surface);
  --theme-button-states-primary-hovered: color-mix(in srgb, var(--c-text) 88%, var(--c-bg));
  --theme-button-secondary-hover: color-mix(in srgb, var(--c-surface) 85%, var(--c-text));
  --theme-button-secondary-inverse-hover: color-mix(in srgb, var(--c-text) 15%, transparent);
  --theme-tonal-tonal: var(--c-surface);
  --palette-grey-0: var(--c-bg);
}

/* ── THEME TOGGLE (icon only; no chrome — fixed only when not in header) ─ */
.theme-toggle {
  position: fixed;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--c-text);
  cursor: pointer;
  transition: opacity 0.2s, color 0.2s, transform 0.15s;
}

.theme-toggle:hover {
  opacity: 0.75;
  color: var(--c-accent1);
  transform: scale(1.06);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--c-accent3);
  outline-offset: 3px;
}

.theme-toggle__icon {
  font-size: 1.35rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-wrapper .theme-toggle {
  position: static;
  width: 2.5rem;
  height: 2.5rem;
}

.header-wrapper .header-contact {
  pointer-events: auto;
}