/* Shared colors for WTM's public agency pages. Project imagery keeps its own colors. */
@media screen {
  html[data-wtm-palette] {
    --wtm-canvas:#111211;
    --wtm-green:#181a17;
    --wtm-raised:#242b27;
    --wtm-ink:#f2f2eb;
    --wtm-muted:#afb2a9;
    --wtm-line:#343731;
    --wtm-accent:#f17054;
    --wtm-olive:#393b32;
    --wtm-taupe:#403836;
    --wtm-hover:#dcded5;
    --wtm-header:rgba(17,18,17,.96);
    --canvas:var(--wtm-canvas);
    --paper:var(--wtm-canvas);
    --bg:var(--wtm-canvas);
    --bg-2:var(--wtm-green);
    --panel:var(--wtm-green);
    --surface:var(--wtm-green);
    --ink:var(--wtm-ink);
    --muted:var(--wtm-muted);
    --line:var(--wtm-line);
    --accent:var(--wtm-accent);
    color-scheme:dark;
    background-color:var(--wtm-canvas);
  }
  html[data-wtm-palette] body {
    --bg:var(--wtm-canvas);
    --muted:var(--wtm-muted);
    background-color:var(--wtm-canvas);
    color:var(--wtm-ink);
  }
  html[data-wtm-palette] ::selection {background:var(--wtm-accent);color:var(--wtm-canvas)}

  /* The homepage header remains transparent over the cinematic hero. */
  html[data-wtm-palette] body:not(.cinematic-site) .site-header,
  html[data-wtm-palette] .wtm-header,
  html[data-wtm-palette].dental-story-page .nav,
  html[data-wtm-palette].dental-story-page .nav.scrolled {background-color:var(--wtm-header);color:var(--wtm-ink);border-color:var(--wtm-line)}
  html[data-wtm-palette] .mobile-nav,
  html[data-wtm-palette] .wtm-header .wtm-menu-nav,
  html[data-wtm-palette] .mobile-menu:modal,
  html[data-wtm-palette].dental-story-page .msheet {background-color:var(--wtm-canvas);color:var(--wtm-ink)}
  html[data-wtm-palette] :is(.brand-stop,.wordmark-dot,.wtm-mark>span) {color:var(--wtm-accent)}

  /* One green for large section backgrounds, one shade for raised surfaces. */
  html[data-wtm-palette] :is(.mobile-evidence,.mobile-chapter,.process-chapter,.tinted-section,.article-example,.letter-journal-promo,.medspa-booking,.redesign-poster),
  html[data-wtm-palette] .cinematic-site .product-feature {background-color:var(--wtm-green)}
  html[data-wtm-palette] :is(.showcase,.feature-tile,.story-photo,.letter-feature-image) {background-color:var(--wtm-green)}
  html[data-wtm-palette] .cinematic-site .founder-card,
  html[data-wtm-palette] .browser-edge {background-color:var(--wtm-raised)}
  html[data-wtm-palette] .mobile-evidence {color:var(--wtm-ink)}
  html[data-wtm-palette] .story-page .service-hero,
  html[data-wtm-palette] .industry-story {background-color:var(--wtm-canvas)}
  html[data-wtm-palette] .story-dining {background-color:var(--wtm-green)}

  /* Each client keeps the same backdrop wherever its work is presented. */
  html[data-wtm-palette] .cinematic-site .northside-art,
  html[data-wtm-palette] .northside-dental :is(.case-showcase,.case-mobile),
  html[data-wtm-palette] .dental-project-phone {background-color:var(--wtm-olive)}
  html[data-wtm-palette] .cinematic-site .beauty-art,
  html[data-wtm-palette] .back-to-30 :is(.case-showcase,.case-mobile),
  html[data-wtm-palette] .medspa-single {background-color:var(--wtm-taupe)}
  html[data-wtm-palette] .project>a:first-child[href*="northside-dental"] {background-color:var(--wtm-olive)}
  html[data-wtm-palette] .project>a:first-child[href*="back-to-30"] {background-color:var(--wtm-taupe)}
  html[data-wtm-palette] .project .app-image {background:var(--wtm-green)}

  html[data-wtm-palette] :is(.primary-action,.btn-primary) {background-color:var(--wtm-ink);color:var(--wtm-canvas)}
  html[data-wtm-palette] :is(.primary-action,.btn-primary,.letter-subscribe):hover {background-color:var(--wtm-hover);color:var(--wtm-canvas)}
  html[data-wtm-palette] .chapter-copy .text-cta {color:var(--wtm-ink)}
  html[data-wtm-palette] .chapter-copy .text-cta:hover {color:var(--wtm-accent)}
  html[data-wtm-palette] .viewer-tabs button[aria-selected=true],
  html[data-wtm-palette] .mobile-tabs button[aria-selected=true] {background-color:var(--wtm-ink);color:var(--wtm-canvas)}
  html[data-wtm-palette] .viewer-tabs button[aria-selected=true]:hover {background-color:var(--wtm-hover)}
  html[data-wtm-palette] .viewer-tabs button:not([aria-selected=true]):hover {background-color:var(--wtm-raised)}
  html[data-wtm-palette] .mobile-tabs {background-color:var(--wtm-raised)}
  html[data-wtm-palette] :is(.product-name,.product-intro,.screen-description,.product-status,.screen-picker button,.mobile-source,.project-caption>div>p) {color:var(--wtm-muted)}
  html[data-wtm-palette] .screen-picker button[aria-pressed=true] {color:var(--wtm-ink);border-color:var(--wtm-ink)}
  html[data-wtm-palette] .screen-picker button:hover {color:var(--wtm-ink)}

  /* Dental's public page keeps its form structure and state colors. */
  html[data-wtm-palette].dental-story-page {
    --amber:var(--wtm-accent);--amber-soft:var(--wtm-accent);
    --navy-canvas:var(--wtm-canvas);--navy-card:var(--wtm-green);
  }
  html[data-wtm-palette].dental-story-page :is(.hero,.stmt-card) {background-color:var(--wtm-canvas)}
  html[data-wtm-palette].dental-story-page :is(.hcard,.price-card,.faq-aside) {background-color:var(--wtm-green);border-color:var(--wtm-line)}
  html[data-wtm-palette].dental-story-page .sticky-cta {background-color:var(--wtm-header)}

  /* Earlier Journal layouts retain their typography and content. */
  html[data-wtm-palette="journal"] {
    --cream:var(--wtm-ink);--cream-2:var(--wtm-green);
    --ink-2:var(--wtm-raised);--lavender:var(--wtm-accent);
    --accent-ink:var(--wtm-accent);--coral:var(--wtm-accent);
    --mute-on-dark:var(--wtm-muted);--mute-on-cream:var(--wtm-muted);
    --line-dark:var(--wtm-line);--line-light:var(--wtm-line);
  }
  html[data-wtm-palette="journal"] :is(.hero,.cta-block) {background-color:var(--wtm-green);color:var(--wtm-ink)}
  html[data-wtm-palette="journal"] .footer {background-color:var(--wtm-canvas);color:var(--wtm-ink)}
  html[data-wtm-palette="journal"] .footer-meta {color:var(--wtm-muted)}
  html[data-wtm-palette="journal"] .stat.lavender {background-color:var(--wtm-raised)}
  html[data-wtm-palette="journal"] .stat.lavender :is(.label,.source) {color:var(--wtm-muted);border-color:var(--wtm-line)}
  html[data-wtm-palette="journal"] .cta-pill {background-color:var(--wtm-ink);color:var(--wtm-canvas)}
  html[data-wtm-palette="journal"] .cta-pill:hover {background-color:var(--wtm-hover);box-shadow:none}

  /* Informational pages use the same palette, with their layouts intact. */
  html[data-wtm-palette="information"] :is(h2,.partner h2 a) {color:var(--wtm-ink)}
  html[data-wtm-palette="information"] :is(p,li,.updated,.lede,.partner p,.partner ul,.footer) {color:var(--wtm-muted)}
  html[data-wtm-palette="information"] :is(main a,p a,li a,.partner .category,.partner .link,.footer a) {color:var(--wtm-accent)}
  html[data-wtm-palette="information"] .eyebrow {background-color:var(--wtm-raised);color:var(--wtm-accent)}
  html[data-wtm-palette="information"] .partner {background-color:var(--wtm-green);border-color:var(--wtm-line)}
  html[data-wtm-palette="information"] .partner:hover {border-color:var(--wtm-accent)}
  html[data-wtm-palette="information"] .partner h2 a:hover {color:var(--wtm-accent)}
  html[data-wtm-palette="information"] .footer {background-color:var(--wtm-canvas)}

  html[data-wtm-palette="roadmap"] {
    --soft:var(--wtm-ink);--faint:var(--wtm-muted);--gold:var(--wtm-accent);
    --dark:var(--wtm-green);--dark-ink:var(--wtm-ink);--dark-muted:var(--wtm-muted);
    --line-2:var(--wtm-line);--line-dark:var(--wtm-line);
  }
  html[data-wtm-palette="roadmap"] :is(.preview .st,.opt,.field input,.grid-card) {background-color:var(--wtm-green);color:var(--wtm-ink)}
  html[data-wtm-palette="roadmap"] :is(.preview .st.on,.grid-top,.gbrow,.res-badge) {background-color:var(--wtm-raised);color:var(--wtm-ink)}
  html[data-wtm-palette="roadmap"] .opt.sel {background-color:var(--wtm-raised)}
  html[data-wtm-palette="roadmap"] .opt.sel .dot {box-shadow:inset 0 0 0 3px var(--wtm-raised)}
  html[data-wtm-palette="roadmap"] .btn:not(.ghost) {background-color:var(--wtm-ink);color:var(--wtm-canvas)}
  html[data-wtm-palette="roadmap"] .btn:not(.ghost):hover {background-color:var(--wtm-hover);color:var(--wtm-canvas)}
  html[data-wtm-palette="roadmap"] .btn.ghost:hover {background-color:var(--wtm-raised);color:var(--wtm-ink)}
  html[data-wtm-palette="roadmap"] .ghl {color:var(--wtm-canvas)}

  /* The small mobile previews keep their existing edge-to-edge image treatment. */
  @media(max-width:767px) {
    html[data-wtm-palette] .cinematic-site #work :is(.project-small,.project-last) .project-art {background:transparent}
  }
}