/* Public marketing and editorial pages use the shared Aurelia color tokens. */
.public-color-page :is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: 3px;
}

.public-color-page :is(.button, .nav-cta, .nav-btn, .nav-link, .nav-link-text, .nav-ig) {
  min-height: var(--target-web, 44px);
}

.public-color-page :is(button, input:not([type="checkbox"]), select, .btn) {
  min-height: var(--target-web, 44px);
}

.public-color-page :is(.nav-links a, .actions a, .contact-list a, .foot-links a) {
  min-height: var(--target-web, 44px);
}

.public-color-page :is(.nav-link, .nav-link-text, .nav-ig, .brand, .footer-brand) {
  display: inline-flex;
  align-items: center;
}

@media (prefers-color-scheme: dark) and (--aurelia-dark-mode) {
  .theme-pricing {
    background: var(--background);
    color: var(--on-surface);
  }

  .theme-pricing .brand-logo,
  .theme-marketing .brand img {
    filter: brightness(0) invert(1);
  }

  .theme-pricing .plan-card {
    background: var(--surface-container-lowest);
    color: var(--on-surface);
    border-color: var(--outline-variant);
  }

  .theme-pricing .trial-box {
    background: var(--warning-container);
    color: var(--on-warning-container);
    border-color: var(--outline-variant);
  }

  .theme-pricing .footer-link a {
    color: var(--primary);
  }

  .theme-document {
    background: var(--background);
    color: var(--on-surface);
  }

  .theme-document main {
    color: var(--on-surface);
  }

  .theme-document a:not(.btn) {
    color: var(--primary);
  }

  .theme-document :is(input:not([type="checkbox"]), select, textarea) {
    background: var(--surface-container-lowest);
    color: var(--on-surface);
    border-color: var(--outline-variant);
  }

  .theme-marketing {
    background: var(--background);
    color: var(--on-surface);
  }

  .theme-marketing .nav.scrolled {
    background: color-mix(in srgb, var(--surface-container-lowest) 94%, transparent);
    border-bottom: 1px solid var(--outline-variant);
  }

  .theme-marketing .hero {
    background:
      radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 27rem),
      linear-gradient(145deg, var(--background), var(--surface-container-low));
  }

  .theme-marketing :is(.dashboard-card, .chat-float, .hub-card, .feature-shot:not(.ai-shot), .table-seat, .table-card, .contact-card, .story) {
    background: var(--surface-container-lowest);
    color: var(--on-surface);
    border-color: var(--outline-variant);
  }

  .theme-marketing :is(.metric, .table-canvas, .unassigned, .table-demo-action, .bubble, .journey-step, .contact-list a) {
    background: var(--surface-container-low);
    color: var(--on-surface);
    border-color: var(--outline-variant);
  }

  .theme-marketing .table-card .seat {
    background: var(--surface-container-low);
    color: var(--primary);
  }

  .theme-marketing .table-card .seat.empty {
    background: transparent;
    border-color: var(--outline-variant);
    color: var(--on-surface-variant);
  }

  .theme-marketing :is(.progress-card, .journey, .price-card, footer) {
    background: var(--surface-container-high);
    color: var(--on-surface);
  }

  .theme-marketing :is(.trust, .hub, .contact) {
    background: var(--surface-container);
    color: var(--on-surface);
    border-color: var(--outline-variant);
  }

  .theme-marketing :is(.mobile, .price, .stories) {
    background: var(--background);
    color: var(--on-surface);
  }

  .theme-marketing :is(.copy, .hero-copy, .hero-note, .trust-item span, .hub-card p, .feature-shot > p, .budget-line div, .contact-list a) {
    color: var(--on-surface-variant);
  }

  .theme-marketing :is(.button.ghost, .nav-access) {
    color: var(--on-surface) !important;
    border-color: var(--outline-variant);
  }

  .theme-marketing .nav-cta {
    background: var(--surface-container-high);
    color: var(--on-surface) !important;
  }

  .theme-marketing .button:not(.ghost),
  .theme-marketing .table-demo-action {
    background: var(--primary);
    color: var(--on-primary);
  }

  .theme-marketing .ai-shot {
    background: linear-gradient(155deg, var(--surface-container-high), var(--surface-container-lowest));
    color: var(--on-surface);
  }

  .theme-marketing .phone-screen,
  .theme-marketing .progress-card .bar {
    background: var(--surface-container-lowest);
    color: var(--on-surface);
  }

  .theme-marketing :is(.contact-card input, .contact-card textarea, .contact-card select) {
    background: var(--surface-container-lowest);
    color: var(--on-surface);
    border-color: var(--outline-variant);
  }

  .theme-marketing .success {
    background: var(--success-container);
    color: var(--on-success-container);
  }

  .theme-stories {
    background: var(--background);
    color: var(--on-surface);
  }

  .theme-stories .nav {
    background: color-mix(in srgb, var(--surface-container-lowest) 94%, transparent);
    border-bottom: 1px solid var(--outline-variant);
  }

  .theme-stories .page-hero {
    background: var(--surface-container-high);
    color: var(--on-surface);
  }

  .theme-stories :is(.story-card, .newsletter-box, .form-card, .article-card, .article-content) {
    background: var(--surface-container-lowest);
    color: var(--on-surface);
    border-color: var(--outline-variant);
  }

  .theme-stories :is(.newsletter-bar, .article-wrap, .page-content) {
    background: var(--background);
    color: var(--on-surface);
  }

  .theme-stories :is(footer, .article-sidebar) {
    background: var(--surface-container-high);
    color: var(--on-surface);
    border-color: var(--outline-variant);
  }

  .theme-stories :is(.story-card p, .story-excerpt, .newsletter-bar p, .article-content p, .form-help) {
    color: var(--on-surface-variant);
  }

  .theme-stories :is(input, select, textarea) {
    background-color: var(--surface-container-lowest);
    color: var(--on-surface);
    border-color: var(--outline-variant);
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-color-page,
  .public-color-page * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}