/* Governança Hub — light (âmbar) / dark (verde-farol) */

html {
  color-scheme: light dark;
}

/* ── Light (B — claro institucional · âmbar) ── */
html,
html[data-theme="light"] {
  --gh-accent: #C98A1B;
  --gh-accent-hover: #D4A035;
  --gh-accent-soft: #FBF1DE;
  --gh-accent-muted: #8A6420;
  --gh-accent-on: #FFFFFF;
  --gh-accent-ring: rgba(201, 138, 27, 0.35);
  --gh-accent-glow: rgba(201, 138, 27, 0.12);
  --gh-bg-body: #F5F7FA;
  --gh-bg-hero: #F8F9FB;
  --gh-bg-nav: rgba(255, 255, 255, 0.92);
  --gh-bg-band-dark: #FFFFFF;
  --gh-bg-band-panel: #FAFBFC;
  --gh-bg-footer: #F0F2F6;
  --gh-bg-cta: #F8F9FB;
  --gh-text-primary: #14202F;
  --gh-text-secondary: #5C6B7F;
  --gh-text-muted: #6E7E93;
  --gh-text-nav: #5C6B7F;
  --gh-text-nav-hover: #14202F;
  --gh-text-inverse: #14202F;
  --gh-text-inverse-muted: #5C6B7F;
  --gh-text-inverse-soft: #5C6B7F;
  --gh-border-nav: rgba(20, 32, 47, 0.08);
  --gh-border-subtle: rgba(20, 32, 47, 0.12);
  --gh-border-outline: rgba(20, 32, 47, 0.18);
  --gh-logo-beacon: #C98A1B;
  --gh-logo-beam: #C98A1B;
  --gh-hero-glow: rgba(201, 138, 27, 0.1);
  --gh-cta-glow: rgba(201, 138, 27, 0.1);
  --gh-step-active-bg: #FBF1DE;
  --gh-step-active-border: rgba(201, 138, 27, 0.4);
  --gh-step-num-border: rgba(20, 32, 47, 0.18);
  --gh-step-panel-num: rgba(201, 138, 27, 0.25);
  --gh-eyebrow-band-dark: #C98A1B;
  --gh-eyebrow-light: #8A6420;
}

/* ── Dark (C — escuro · verde-farol) ── */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --gh-accent: #2FBF8F;
    --gh-accent-hover: #3FD4A2;
    --gh-accent-soft: #E5F6EF;
    --gh-accent-muted: #6FE0BC;
    --gh-accent-on: #07261B;
    --gh-accent-ring: rgba(47, 191, 143, 0.35);
    --gh-accent-glow: rgba(47, 191, 143, 0.12);
    --gh-bg-body: #F5F7FA;
    --gh-bg-hero: #060B14;
    --gh-bg-nav: rgba(10, 19, 34, 0.88);
    --gh-bg-band-dark: #0A1322;
    --gh-bg-band-panel: #101D31;
    --gh-bg-footer: #070E1A;
    --gh-bg-cta: #0A1322;
    --gh-text-primary: #14202F;
    --gh-text-secondary: #5C6B7F;
    --gh-text-muted: #6E7E93;
    --gh-text-nav: #AFBCCC;
    --gh-text-nav-hover: #FFFFFF;
    --gh-text-inverse: #FFFFFF;
    --gh-text-inverse-muted: #A7B4C6;
    --gh-text-inverse-soft: #C9D3E0;
    --gh-border-nav: rgba(255, 255, 255, 0.08);
    --gh-border-subtle: rgba(255, 255, 255, 0.09);
    --gh-border-outline: rgba(255, 255, 255, 0.22);
    --gh-logo-beacon: #2FBF8F;
    --gh-logo-beam: #2FBF8F;
    --gh-hero-glow: rgba(47, 191, 143, 0.12);
    --gh-cta-glow: rgba(47, 191, 143, 0.13);
    --gh-step-active-bg: #101D31;
    --gh-step-active-border: rgba(47, 191, 143, 0.35);
    --gh-step-num-border: rgba(255, 255, 255, 0.18);
    --gh-step-panel-num: rgba(47, 191, 143, 0.25);
    --gh-eyebrow-band-dark: #2FBF8F;
    --gh-eyebrow-light: #157A5B;
  }
}

html[data-theme="dark"] {
  --gh-accent: #2FBF8F;
  --gh-accent-hover: #3FD4A2;
  --gh-accent-soft: #E5F6EF;
  --gh-accent-muted: #6FE0BC;
  --gh-accent-on: #07261B;
  --gh-accent-ring: rgba(47, 191, 143, 0.35);
  --gh-accent-glow: rgba(47, 191, 143, 0.12);
  --gh-bg-body: #F5F7FA;
  --gh-bg-hero: #060B14;
  --gh-bg-nav: rgba(10, 19, 34, 0.88);
  --gh-bg-band-dark: #0A1322;
  --gh-bg-band-panel: #101D31;
  --gh-bg-footer: #070E1A;
  --gh-bg-cta: #0A1322;
  --gh-text-primary: #14202F;
  --gh-text-secondary: #5C6B7F;
  --gh-text-muted: #6E7E93;
  --gh-text-nav: #AFBCCC;
  --gh-text-nav-hover: #FFFFFF;
  --gh-text-inverse: #FFFFFF;
  --gh-text-inverse-muted: #A7B4C6;
  --gh-text-inverse-soft: #C9D3E0;
  --gh-border-nav: rgba(255, 255, 255, 0.08);
  --gh-border-subtle: rgba(255, 255, 255, 0.09);
  --gh-border-outline: rgba(255, 255, 255, 0.22);
  --gh-logo-beacon: #2FBF8F;
  --gh-logo-beam: #2FBF8F;
  --gh-hero-glow: rgba(47, 191, 143, 0.12);
  --gh-cta-glow: rgba(47, 191, 143, 0.13);
  --gh-step-active-bg: #101D31;
  --gh-step-active-border: rgba(47, 191, 143, 0.35);
  --gh-step-num-border: rgba(255, 255, 255, 0.18);
  --gh-step-panel-num: rgba(47, 191, 143, 0.25);
  --gh-eyebrow-band-dark: #2FBF8F;
  --gh-eyebrow-light: #157A5B;
}

body {
  background: var(--gh-bg-body) !important;
}

.gh-page {
  color: var(--gh-text-primary) !important;
  background: var(--gh-bg-body) !important;
}

/* Nav */
.gh-nav {
  background: var(--gh-bg-nav) !important;
  border-bottom-color: var(--gh-border-nav) !important;
}

.gh-nav-brand {
  color: var(--gh-text-inverse) !important;
}

html[data-theme="light"] .gh-nav-brand,
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) .gh-nav-brand {
    color: var(--gh-text-primary) !important;
  }
}

.gh-nav-link {
  color: var(--gh-text-nav) !important;
}

.gh-logo-beacon {
  fill: var(--gh-logo-beacon) !important;
}

.gh-logo-beam {
  fill: var(--gh-logo-beam) !important;
}

.gh-btn-primary {
  background: var(--gh-accent) !important;
  color: var(--gh-accent-on) !important;
}

.gh-btn-secondary {
  border-color: var(--gh-border-outline) !important;
  color: var(--gh-text-inverse) !important;
}

html[data-theme="light"] .gh-btn-secondary,
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) .gh-btn-secondary {
    color: var(--gh-text-primary) !important;
  }
}

.gh-theme-toggle {
  appearance: none;
  border: 1px solid var(--gh-border-outline);
  background: transparent;
  color: var(--gh-text-nav);
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.gh-theme-toggle:hover {
  color: var(--gh-text-nav-hover);
  border-color: var(--gh-accent);
  background: var(--gh-accent-glow);
}

.gh-theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.gh-theme-toggle .gh-icon-sun {
  display: none;
}

html[data-theme="dark"] .gh-theme-toggle .gh-icon-moon {
  display: none;
}

html[data-theme="dark"] .gh-theme-toggle .gh-icon-sun {
  display: block;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .gh-theme-toggle .gh-icon-moon {
    display: none;
  }

  html:not([data-theme="light"]) .gh-theme-toggle .gh-icon-sun {
    display: block;
  }
}

/* Hero */
.gh-hero {
  background: var(--gh-bg-hero) !important;
}

.gh-hero-glow {
  background: radial-gradient(circle, var(--gh-hero-glow) 0%, transparent 65%) !important;
}

.gh-hero-badge {
  border-color: var(--gh-accent-ring) !important;
  background: var(--gh-accent-glow) !important;
  color: var(--gh-accent-muted) !important;
}

.gh-hero-badge-dot {
  background: var(--gh-accent) !important;
}

.gh-hero-title {
  color: var(--gh-text-inverse) !important;
}

.gh-hero-lead {
  color: var(--gh-text-inverse-muted) !important;
}

.gh-hero-pill {
  border-color: var(--gh-border-outline) !important;
  color: var(--gh-text-inverse-muted) !important;
}

html[data-theme="light"] .gh-hero-pill,
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) .gh-hero-pill {
    color: var(--gh-text-secondary) !important;
  }
}

/* Dark bands (como funciona, CTA, footer) */
.gh-band-dark {
  background: var(--gh-bg-band-dark) !important;
}

.gh-band-dark .gh-eyebrow-dark {
  color: var(--gh-eyebrow-band-dark) !important;
}

.gh-band-dark .gh-heading-inverse {
  color: var(--gh-text-inverse) !important;
}

.gh-band-dark .gh-text-inverse-muted {
  color: var(--gh-text-inverse-muted) !important;
}

.gh-step-panel {
  background: var(--gh-bg-band-panel) !important;
  border-color: var(--gh-border-subtle) !important;
}

.gh-step-panel .gh-step-num-large {
  color: var(--gh-step-panel-num) !important;
}

.gh-step-panel h3 {
  color: var(--gh-text-inverse) !important;
}

.gh-step-panel p,
.gh-step-panel .gh-step-point {
  color: var(--gh-text-inverse-muted) !important;
}

.gh-step-panel .gh-step-bullet {
  background: var(--gh-accent) !important;
}

.gh-cta-glow {
  background: radial-gradient(circle, var(--gh-cta-glow) 0%, transparent 65%) !important;
}

.gh-footer {
  background: var(--gh-bg-footer) !important;
}

.gh-footer .gh-footer-brand,
.gh-footer .gh-footer-link:hover {
  color: var(--gh-text-inverse) !important;
}

.gh-footer .gh-footer-text,
.gh-footer .gh-footer-label,
.gh-footer .gh-footer-link {
  color: var(--gh-text-nav) !important;
}

html[data-theme="light"] .gh-footer .gh-footer-brand,
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) .gh-footer .gh-footer-brand {
    color: var(--gh-text-primary) !important;
  }
}

.gh-eyebrow {
  color: var(--gh-eyebrow-light) !important;
}