/* VotaBrasil V4 — final semantic colors and contrast on pastel blocks.
   All layout, typography, breakpoints and animation remain in the VOID files. */
:root {
  --brand-navy: #102a3a;
  --brand-teal: #188777;
  --brand-mint: #63c6b0;
  --accent-soft: #b8d4c7;
  --accent-hover: #d0e1d7;
  --block-sage: #cddcd4;
  --block-blue: #bdcfd6;
  --block-ink: #102a3a;
  --block-copy: #385663;
  --line: #b1cbc229;
}

/* Quiet mint accents keep the brand recognizable against the navy shell. */
.status-dot,
.reading-progress i { background: var(--brand-mint); }
.button:hover { background: var(--accent-hover); color: var(--block-ink); }
.core-glow { background: #18877725; }
.hero-visual[data-phase="3"] .identity-card {
  border-color: var(--brand-mint);
  box-shadow: 0 14px 0 -3px #10242e, 0 14px 0 -2px #63c6b066,
              0 27px 0 -5px #10242e, 0 27px 0 -4px #63c6b02b;
}
.orbit-two { border-color: #63c6b033; }
.integrity-section:before { background: #6e9a91; }
.journey-step.active { background: #b8d4c70b; }

/* Blue-grey color block: every reading and interaction surface uses dark ink. */
.verification-visual {
  background: var(--block-blue);
  border-color: #8eaab4;
  color: var(--block-ink);
}
.verification-header .eyebrow,
.verification-header .demo-chip,
.verification-kicker { color: var(--block-copy); }
.verification-header .demo-chip { border-color: #617d87; }
.verification-halo {
  border-color: #102a3a2e;
  box-shadow: 0 0 0 24px #102a3a05, 0 0 0 48px #102a3a04;
}
.verification-icon {
  background: var(--brand-navy);
  color: #eff2ee;
  border-color: #6d8a94;
  box-shadow: 8px 8px 0 #8daab5;
}
.verification-visual[data-step="3"] .verification-icon {
  background: #315c59;
  color: #eff2ee;
  border-color: #315c59;
}
.small-orbit { background: var(--brand-teal); border-color: var(--block-blue); }
.small-orbit.o-two { background: var(--brand-navy); }
.verification-content h3 { color: var(--block-ink); }
.verification-content p { color: var(--block-copy); }
.verification-timeline i { background: #102a3a26; }
.verification-timeline i.done { background: #315c59; }
.verification-visual .button-outline {
  color: var(--block-ink);
  background: transparent;
  border-color: #617d87;
}
.verification-visual .button-outline:hover {
  color: #eff2ee;
  background: var(--brand-navy);
  border-color: var(--brand-navy);
}
.verification-visual button:focus-visible { outline-color: var(--brand-navy); }

/* Sage block adds a measured pause to the dark narrative. */
.experience-band { background: var(--block-sage); color: var(--block-ink); }
.experience-inner>.eyebrow { color: #425f54; }
.experience-inner>p>span { -webkit-text-stroke-color: var(--block-ink); }
.experience-line:before { background: #102a3a5e; }
.experience-line img,
.experience-line i,
.experience-line i:first-child,
.experience-line i:last-child { background: var(--brand-navy); }

/* Pastel hover treatment replaces the saturated VOID red. */
.security-layer:hover,
.security-layer:nth-child(even):hover { background: var(--block-sage); color: var(--block-ink); }
.security-layer:hover .layer-heading .icon,
.security-layer:hover p,
.security-layer:hover .layer-tag,
.security-layer:hover .layer-index { color: var(--block-ink); }

/* Neutralize the last inherited light-theme details. */
.tour-stage-top>.icon { color: var(--accent-soft); }
.tour-sample>.icon { color: var(--brand-mint); }
.faq-list details { border-color: var(--line); }
.footer-top,
.footer-bottom { border-color: var(--line); }