@import '../../css/bosi-theme.css';

/* Shared site chrome and marketing surfaces; product demos keep their own colors. */
:root {
  --bg: var(--x-paper);
  --paper: var(--x-paper);
  --paper-strong: var(--x-paper-strong);
  --surface: var(--x-paper-strong);
  --surface-soft: var(--x-soft);
  --ink: var(--x-ink);
  --muted: var(--x-muted);
  --line: var(--x-line);
  --accent: var(--x-gold-strong);
  --accent-2: var(--x-navy);
  --accent-soft: rgb(var(--x-gold-rgb) / 12%);
  --dark: var(--x-navy);
  --dark-muted: var(--x-muted-on-dark);
  --night: var(--x-navy);
  --night-soft: var(--x-night-panel);
}

:root[data-showcase-tone='dark'] {
  --bg: var(--x-navy);
  --panel: var(--x-night-panel);
  --surface: var(--x-night-panel);
  --surface-soft: var(--x-night-soft);
  --text: var(--x-on-dark);
  --ink: var(--x-on-dark);
  --muted: var(--x-muted-on-dark);
  --line: rgb(255 255 255 / 14%);
  --accent: var(--x-gold);
}

body {background: var(--bg);}
::selection {background: var(--x-gold); color: var(--x-navy);}
:is(a, button, input, select):focus-visible {outline: 3px solid var(--x-gold-strong); outline-offset: 4px;}

body > header,
body > .nav-wrap {
  background: rgb(var(--x-navy-rgb) / 96%);
  color: var(--x-on-dark);
  border-color: rgb(255 255 255 / 12%);
}

body > header .nav-links,
body > header .brand small,
body > header .product-brand small {color: var(--x-muted-on-dark);}
body > header .brand,
body > header .product-brand {color: var(--x-on-dark);}
body > header .nav-links a:hover {color: var(--x-gold-light);}
body > header .nav-links a::after {background: var(--x-gold);}
body > header :is(a, button):focus-visible {outline-color: var(--x-gold);}
body > header .menu-button {background: var(--x-night-panel); color: var(--x-on-dark); border-color: rgb(255 255 255 / 24%);}
body > header .lang-switch {background: var(--x-night-panel); border-color: rgb(255 255 255 / 20%);}
body > header .lang-switch button {color: var(--x-muted-on-dark);}
body > header .lang-switch button.active {background: var(--x-gold); color: var(--x-navy);}

body .nav-cta,
body .button-primary,
body .final-cta .button-dark,
body .button-light {
  background: var(--x-gold);
  border-color: var(--x-gold);
  color: var(--x-navy);
  box-shadow: none;
}

body .nav-cta:hover,
body .button-primary:hover,
body .button-primary:focus-visible,
body .final-cta .button-dark:hover,
body .button-light:hover {background: var(--x-gold-hover); color: var(--x-navy); box-shadow: 0 0 0 4px rgb(var(--x-gold-rgb) / 14%);}
body .nav-cta span {color: inherit;}

body .hero,
body .final-cta {
  --accent: var(--x-gold);
  --dark-muted: var(--x-muted-on-dark);
  background: var(--x-navy);
  color: var(--x-on-dark);
}

body .hero::before {background: none;}
body .hero h1,
body .final-cta h2 {color: var(--x-on-dark);}
body .hero h1 :is(span, em),
body .final-cta h2 :is(span, em) {background: none; color: var(--x-gold-light); -webkit-text-fill-color: var(--x-gold-light);}
body .hero h1 span::after {border-color: var(--x-gold);}
body .hero-line {color: var(--x-gold-light);}
body .hero-copy,
body .hero-copy > p,
body .hero-description,
body .hero-proof,
body .final-cta > p,
body .final-inner > p {color: var(--x-muted-on-dark);}
body .hero .eyebrow,
body .final-cta .eyebrow {color: var(--x-gold-light);}
body .hero .button-secondary,
body .hero .button-dark,
body .hero .button-ghost,
body .final-cta .button-secondary {background: var(--x-night-panel); color: var(--x-on-dark); border-color: rgb(255 255 255 / 24%);}
body .hero .button-secondary:hover,
body .hero .button-dark:hover,
body .hero .button-ghost:hover,
body .final-cta .button-secondary:hover {border-color: var(--x-gold);}
body .hero .hero-badge {background: var(--x-night-panel); color: var(--x-gold-light); border-color: rgb(var(--x-gold-rgb) / 35%);}
body .hero .hero-badge span {color: inherit;}
body .hero :is(a, button):focus-visible,
body .final-cta :is(a, button):focus-visible {outline-color: var(--x-gold);}

/* Light product canvases need their own text color inside a dark hero. */
body .hero :is(.design-app, .whiteboard, .product-stage) {color: var(--x-ink);}

body :is(.section-heading, .workflow-heading, .workflow-title, .scenario-intro, .workflow-intro) h2 :is(span, em),
body .section-index {color: var(--x-gold-strong);}
body :is(.template-section, .workbench-band, .deployment-band) {background: var(--x-navy);}
body .template-section .section-heading h2 em,
body .section-heading.light .section-index {color: var(--x-gold-light);}
body .hero-proof i,
body .kicker i,
body .eyebrow::before,
body .hero .eyebrow > span:first-child,
body .status-pill i {background: var(--x-gold);}
body .final-inner .eyebrow {color: var(--x-gold-light);}
body :is(.ambient-one, .ambient-two, .cta-glow) {background: rgb(var(--x-gold-rgb) / 25%);}
:root[data-showcase-tone='dark'] :is(.section-heading, .scenario-intro, .workflow-intro) h2 :is(span, em),
:root[data-showcase-tone='dark'] .section-index {color: var(--x-gold-light);}
:root[data-showcase-tone='dark'] .workflow {background: var(--x-night-soft);}
:root[data-showcase-tone='dark'] .capabilities:not(.section-shell) {background: var(--x-paper); color: var(--x-ink);}

body > footer {background: var(--x-night-deep); color: var(--x-on-dark); border-color: rgb(255 255 255 / 14%);}
body > footer .brand {color: var(--x-on-dark);}
body > footer .footer-inner,
body > footer .footer-inner p,
body > footer .footer-links {color: var(--x-muted-on-dark);}
body > footer a:hover {color: var(--x-gold-light);}

.xpd-home-link {background: rgb(var(--x-navy-rgb) / 94%); color: var(--x-on-dark);}
.xpd-home-link span {color: var(--x-gold);}
.xpd-home-link:hover {background: var(--x-night-panel); border-color: var(--x-gold); color: var(--x-on-dark);}
.xpd[data-demo-theme='night'] {--xpd-ink: var(--x-on-dark); --xpd-surface: var(--x-night-panel); --xpd-muted: var(--x-muted-on-dark);}

@media (max-width: 760px) {
  body > header .nav-links {background: var(--x-night-soft); border-color: rgb(255 255 255 / 14%);}
}