/* Every palette supplies the same semantic tokens; screenshots retain their own colors. */
:root {
  --page: #f7f8f3;
  --ink: #263021;
  --muted: #687260;
  --lime: #d7f578;
  --line: #dfe5d5;
  --surface: #ffffff;
  --soft: #f1f5e9;
  --panel: #eaf0dd;
  --accent: #526d2e;
  --accent-hover: #c7e86a;
  --strong: #293626;
  --on-strong: #f6faed;
}
:root[data-theme="violet"] {
  --page: #f8f5fc;
  --ink: #322940;
  --muted: #766781;
  --lime: #dfc6ff;
  --line: #e6dcec;
  --surface: #fffaff;
  --soft: #f3ecfb;
  --panel: #ede2f8;
  --accent: #79539b;
  --accent-hover: #d2b1fb;
  --strong: #443056;
  --on-strong: #fcf5ff;
}
:root[data-theme="sky"] {
  --page: #f3f8fc;
  --ink: #223747;
  --muted: #5f7585;
  --lime: #b5e3fc;
  --line: #d6e5ee;
  --surface: #fbfdff;
  --soft: #eaf4fb;
  --panel: #dfedf8;
  --accent: #336f97;
  --accent-hover: #9ed5f5;
  --strong: #253f56;
  --on-strong: #f1faff;
}
:root[data-theme="apricot"] {
  --page: #fcf7f0;
  --ink: #433325;
  --muted: #806e59;
  --lime: #ffdaa2;
  --line: #ecdfce;
  --surface: #fffdf9;
  --soft: #fbf0df;
  --panel: #f5e7d1;
  --accent: #926129;
  --accent-hover: #f5c889;
  --strong: #533d29;
  --on-strong: #fff9ef;
}
:root[data-theme="rose"] {
  --page: #fcf5f6;
  --ink: #482d35;
  --muted: #866772;
  --lime: #fac9d7;
  --line: #efdae1;
  --surface: #fffbfc;
  --soft: #fcebf0;
  --panel: #f7e0e8;
  --accent: #a04e6a;
  --accent-hover: #f3b5c8;
  --strong: #58323f;
  --on-strong: #fff5f8;
}

.page-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 24px;padding-top:22px}
.page-toolbar .breadcrumb{padding-top:0;gap:18px;flex-wrap:wrap}
.breadcrumb-path,.page-toolbar .online{white-space:nowrap}
.theme-picker{display:flex;align-items:center;justify-content:flex-end;gap:15px;flex-wrap:wrap}
[hidden]{display:none!important}
.theme-picker-label{font-size:11px;color:var(--muted)}
.theme-options{display:flex;flex-wrap:wrap;gap:6px}
.theme-option{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--muted);padding:8px 12px;font-size:11px;min-height:36px}
.theme-option:hover{background:var(--soft);color:var(--ink)}
.theme-option[aria-pressed="true"]{background:var(--panel);border-color:var(--accent);color:var(--ink);font-weight:650}
.theme-dot{width:11px;height:11px;border-radius:50%;border:1px solid #0002;flex-shrink:0}
.dot-lime{background:#d7f578}.dot-violet{background:#dfc6ff}.dot-sky{background:#b5e3fc}.dot-apricot{background:#ffdaa2}.dot-rose{background:#fac9d7}

/* Shared component colors, independent of the selected palette. */
button:focus-visible,a:focus-visible,summary:focus-visible{outline-color:var(--accent)}
.brand-icon,.product-icon{background:var(--strong)}
.header-contact{border-color:var(--line);color:var(--ink)}
nav a,.breadcrumb,.breadcrumb>span:not(.online),.hero-copy>p,.hero-tags,
.section-caption,.product-top p,.product-description,.metadata,.metadata b,
.download-note,.tool-type,.tool-card p,.steps p,.small-label,.advisor-tag,
.advisor-card>p,.advisor-services,.advisor-hours,.notice-card ul,.preview-note,
.preview-note p,.faq-section>div>p,details p,footer,.footer-brand span,
dialog p{color:var(--muted)}
.eyebrow,.section-heading h2 span,.tool-link,.step-number,.notice-heading>span,
.footer-brand,summary span,.close-dialog{color:var(--accent)}
nav a.active:after,.eyebrow>span,.online i{background:var(--accent)}
.page-toolbar .online i{background:#22b66f;box-shadow:0 0 0 3px #22b66f22}
.download-card,.tool-card,dialog{background:var(--surface)}
.badge{background:var(--soft);border-color:var(--line);color:var(--accent)}
.primary{color:var(--ink)}
.primary:hover{background:var(--accent-hover)}
.secondary,.download-note,.steps{background:var(--soft);border-color:var(--line);color:var(--muted)}
.tool-link,.steps>div+div,.advisor-services{border-color:var(--line)}
.tool-link:hover{color:var(--ink)}
.advisor-card{background:var(--panel);border-color:var(--line)}
.avatar{background:var(--lime);color:var(--accent);border-color:var(--surface)}
.avatar span{background:var(--strong);border-color:var(--panel)}
.contact-button{background:var(--strong);color:var(--on-strong)}
.contact-button:hover{background:var(--accent)}
.notice-card li::marker{color:var(--accent)}
.dialog-icon{background:var(--panel);color:var(--accent)}
@media(max-width:760px){
  .theme-picker{justify-content:flex-start;flex-wrap:wrap;gap:10px}
}
@media(max-width:520px){
  .theme-picker-label{width:100%;font-size:10px}
  .theme-option{padding:8px 9px;font-size:10px}
  .theme-options{gap:5px}
}