/* Theme toggle and alternate palette for Truecoat Painting, Premium.
   Generated by _design-system/builder/gallery_theme/apply.py; edit themes.py there, not this file. */
/* Theme toggle button. It inherits the header's text colour, so it reads correctly over
   footage and on solid bars alike. Hidden until the head script has set a theme (no-JS visitors
   keep the designed palette and never see a dead control). */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;margin:0;padding:0;border:1px solid color-mix(in srgb,currentColor 28%,transparent);border-radius:50%;background:transparent;color:inherit;line-height:0;cursor:pointer;transition:border-color .2s,background-color .2s}
.theme-toggle:hover{border-color:currentColor;background:color-mix(in srgb,currentColor 8%,transparent)}
.theme-toggle:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.theme-toggle .theme-toggle__icon{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .theme-toggle__sun{display:none}
html[data-theme="dark"] .theme-toggle .theme-toggle__sun{display:block}
html[data-theme="dark"] .theme-toggle .theme-toggle__moon{display:none}
html:not([data-theme]) .theme-toggle{display:none}
@media (prefers-reduced-motion:reduce){.theme-toggle{transition:none}}
/* Toggle placement in this header. */
.topbar{grid-template-columns:1fr auto auto 1fr}
.topbar>.theme-toggle{margin-left:-12px}
@media (max-width:900px){.topbar{grid-template-columns:1fr auto auto}.topbar>.theme-toggle{margin-left:0}}
/* Alternate palette. The designed palette stays the default. */
html[data-theme="dark"]{color-scheme:dark;--bg:#141617;--surface:#1C1F20;--ink:#EEF0EE;--muted:#A4AAAD;--line:rgba(238,240,238,.12);--line-strong:rgba(238,240,238,.3);--paper:#141617}
html[data-theme="dark"] .topbar{background:color-mix(in srgb,var(--bg) 86%,transparent)}
@media (max-width:900px){html[data-theme="dark"] .nav{background:var(--bg)}}
@media (max-width:640px){html[data-theme="dark"] .callbar{background:color-mix(in srgb,var(--bg) 94%,transparent)}}
/* The swatch picker rewrites the accent on the page, so text accents are mixed from whatever swatch is live. */
html[data-theme="dark"] :is(.display em,.eyebrow,.inline-link,.intro__facts b,.ledger__row .mono,.day .mono,.pcard__copy .mono,.viz__out .mono,.quote footer .mono,.stars,.promise__list b,.guide .mono,.page-hero__facts b,.spec-list svg,.stat-band b,.tile__copy .mono,.article__meta,.rating__big,.contact-details svg){color:color-mix(in srgb,var(--accent) 45%,white)}
html[data-theme="dark"] .faq__list summary::after,html[data-theme="dark"] .steps li::before{color:color-mix(in srgb,var(--accent) 45%,white)}
html[data-theme="dark"] .chapter__copy .display em{color:#fff}
html[data-theme="dark"] :is(.skip-link,.btn--ink,.viz__rooms button[aria-selected="true"],.callbar__cta){color:var(--bg)}
html[data-theme="dark"] :is(.compare__tag,.viz__stage .viz__tag,.compare__handle span::before){color:#17191A}
html[data-theme="dark"] .field :is(input,select,textarea){background:var(--surface);color:var(--ink)}
html[data-theme="dark"] .article :is(p,li){color:var(--ink)}