/* Loaded after page styles so the homepage's tokens also follow the OS.
   Media queries apply before paint and update when the OS setting changes. */
:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #8bd4c6;
    --mint: #183c36;
    --sand: #252923;
    --gray: #222d35;
    /* Existing components use --white for their panel backgrounds. */
    --white: #182229;
    --canvas: #0f171d;
    --ink: #edf4f2;
    --muted: rgb(237 244 242 / 72%);
    --line: rgb(237 244 242 / 18%);
    --shadow: 0 24px 70px rgb(0 0 0 / 35%);
  }

  .nav {
    background: rgb(15 23 29 / 94%);
  }

  .nav-dropdown__panel,
  .nav-dropdown__panel--product,
  .logos {
    background: var(--white);
  }

  .logo,
  .logo-set img,
  .enterprise-logo-grid img,
  .case-hero__brand img,
  .axiom-proof__copy img,
  .client-proof__logo img,
  .case__metric img {
    filter: brightness(0) invert(1);
  }

  .menu {
    color: var(--ink);
  }

  .button--primary,
  .closing .button {
    background: #207065;
    color: #fff;
  }

  .button--primary:hover,
  .closing .button:hover {
    background: #285e55;
  }

  .button--teal,
  .price-card--featured,
  .price-card--featured h2,
  .price-card--featured .price strong,
  .price-card--featured .price .price__kicker,
  .axiom-quote-band--mint {
    color: var(--ink);
  }

  .price-card--featured p,
  .price-card--featured li,
  .price-card--featured .price span {
    color: var(--muted);
  }

  .stat-strip,
  .price-card:not(.price-card--featured),
  .team-card,
  .embed-shell,
  .enterprise-step,
  .enterprise-step:not(:last-child)::after,
  .boundary-note,
  .playbook-demo,
  .case-metric,
  .axiom-metrics .case-metric,
  .announcement-page .case-metrics .case-metric,
  .outcomes .section-head,
  .case__grid > div:last-child {
    background: var(--white);
  }

  /* Keep light text and logo backgrounds in the existing navy sections. */
  footer,
  .page-section--navy,
  .pricing-quote,
  .about-quote,
  .axiom-quote-band:not(.axiom-quote-band--mint),
  .boundary-card--legal,
  .announcement-quote {
    --mint: #cfe8e2;
  }

  .enterprise-step::before,
  .governance__flow li::before,
  .system-fit strong,
  .pager span[aria-current="page"] {
    background: #207065;
  }

  .rollout-grid b {
    color: #207065;
  }

  .hero-shell::before {
    opacity: 0.2;
  }

  .hero-play__icon {
    background: #cfe8e2;
  }

  .media-play::before {
    border-left-color: #fff;
  }

  .outcome:nth-child(1),
  .outcome:nth-child(5) {
    background: linear-gradient(145deg, #183c36, #182229);
  }

  .outcome:nth-child(2) {
    background: linear-gradient(145deg, #343229, #182229);
  }

  .outcome:nth-child(3),
  .outcome:nth-child(4) {
    background: linear-gradient(145deg, #263545, #182229);
  }

  .outcome:nth-child(6) {
    background: linear-gradient(145deg, #382d40, #182229);
  }

  .outcome__media {
    background: var(--white);
  }

  .governance__flow li,
  .placeholder-canvas {
    background: linear-gradient(145deg, var(--mint), var(--white));
  }

  .suite {
    background: linear-gradient(180deg, var(--canvas), var(--surface));
  }

  .quote-card blockquote strong {
    background: linear-gradient(transparent 66%, var(--mint) 66%);
  }
}