@import url("tokens.css");

/* Opt-in palette bridge for legacy layouts. The refreshed homepage and SEO
   page keep their own styles. Compatibility names map to semantic tokens here. */
body.gwb-light {
  --black: var(--gwb-color-paper);
  --dark: var(--gwb-color-sage);
  --card: #fff;
  --border: var(--gwb-color-rule);
  --white: var(--gwb-color-ink);
  --muted: var(--gwb-color-text);
  --orange: var(--gwb-color-button-hover);
  --orange-dim: var(--gwb-color-button-hover);
  color: var(--gwb-color-ink);
  background: var(--gwb-color-paper);
  color-scheme: light;
}

/* Match the dark framing retained by both approved reference pages. */
body.gwb-light > nav,
body.gwb-light > footer {
  --black: #0a0a0a;
  --dark: #111;
  --card: #161616;
  --border: #2a2a2a;
  --white: #f0ede8;
  --muted: #b4b1aa;
  --orange: #26a374;
  color: var(--white);
  background: var(--black);
  color-scheme: dark;
}

/* Hard-coded legacy surface exceptions, kept separate from image pixels and
   third-party booking/form styles. Green fills inherit light button lettering. */
.gwb-light .video-placeholder:hover { background: var(--gwb-color-sage); }
.gwb-light .site-shot { background: var(--gwb-color-sage); }
.gwb-light .tier.featured { background: #fff; }
.gwb-light .video-duration { color: #f0ede8; }
.gwb-light .blog-card.featured,
.gwb-light .post-body .code-block { background: var(--card); }
.gwb-light .post-body p,
.gwb-light .post-body li,
.gwb-light .post-body td,
.gwb-light .post-body .callout p,
.gwb-light .post-body blockquote p,
.gwb-light .post-trust p,
.gwb-light .post-meta,
.gwb-light .sidebar-toc a,
.gwb-light .sidebar-related a,
.gwb-light .cta-sub { color: var(--muted); }
.gwb-light .post-body p strong,
.gwb-light .post-body li strong,
.gwb-light .post-trust strong { color: var(--white); }
.gwb-light .post-body .code-block { color: var(--orange); }
.gwb-light .btn-primary:hover { background: var(--gwb-color-button-hover); }
.gwb-light .res-download:hover { color: var(--gwb-color-ink); }
.gwb-light .confirm-banner { color: #f0ede8; }
.gwb-light :focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
}