/* Websea UI Design Spec · Light theme mapping
   Escaped custom-property names preserve the original Figma token names. */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --Primary\/110\%B: #2CE36C;
  --Primary\/110\%W: #02B43B;
  --Primary\/100\%: #06C84A;
  --Primary\/80\%: rgb(6 200 74 / 80%);
  --Primary\/40\%: rgb(6 200 74 / 40%);
  --Primary\/12\%: rgb(6 200 74 / 12%);
  --Primary\/5\%: rgb(6 200 74 / 5%);
  --Red\/100\%: #F6465D;
  --Red\/40\%: rgb(246 70 93 / 40%);
  --Green\/100\%: #2BBC81;
  --Yellow\/100\%: #F5B718;
  --Text\/O-100\%: #121212;
  --Text\/O-80\%: rgb(18 18 18 / 80%);
  --Text\/O-60\%: rgb(18 18 18 / 60%);
  --Text\/O-40\%: rgb(18 18 18 / 40%);
  --Text\/O-20\%: rgb(18 18 18 / 20%);
  --Text\/WW: #FFFFFF;
  --Text\/BB: #000000;
  --Text\/BW: #000000;
  --Text\/WB: #FFFFFF;
  --Main\/O-100\%: #121212;
  --Background\/O-0\%: #FFFFFF;
  --Background\/O-2\%: rgb(18 18 18 / 2%);
  --Background\/O-4\%: rgb(18 18 18 / 4%);
  --Cover\/O-2\%: rgb(18 18 18 / 2%);
  --Cover\/O-4\%: rgb(18 18 18 / 4%);
  --Cover\/O-8\%: rgb(18 18 18 / 8%);
  --Cover\/O-12\%: rgb(18 18 18 / 12%);
  --Cover\/O-16\%: rgb(18 18 18 / 16%);
  --Divider\/O-4\%: rgb(18 18 18 / 4%);
  --Divider\/O-8\%: rgb(18 18 18 / 8%);
  --Outline\/O-8\%: rgb(18 18 18 / 8%);
  --Outline\/O-12\%: rgb(18 18 18 / 12%);
  --Outline\/O-16\%: rgb(18 18 18 / 16%);
  --icon\/O-100\%: #121212;
  --icon\/O-60\%: rgb(18 18 18 / 60%);
  --icon\/O-40\%: rgb(18 18 18 / 40%);
  --icon\/BW: #000000;
  --icon\/WB: #FFFFFF;
  --Overlay-white\/White: #FFFFFF;
  --Overlay-white\/White-0\%: rgb(255 255 255 / 0%);
  --Mask\/BB-60\%: rgb(0 0 0 / 60%);
  --Radius\/4: 4px;
  --Radius\/6: 6px;
  --Radius\/8: 8px;
  --Radius\/12: 12px;
  --Radius\/16: 16px;
  --Radius\/24: 24px;
  --Radius\/Full: 9999px;

  /* Compatibility aliases for the original prototype components. */
  --bg: var(--Background\/O-0\%);
  --surface: var(--Background\/O-0\%);
  --surface-alt: var(--Cover\/O-4\%);
  --surface-raised: var(--Background\/O-0\%);
  --ink: var(--Text\/O-100\%);
  --ink-muted: var(--Text\/O-60\%);
  --ink-faint: var(--Text\/O-40\%);
  --border: var(--Outline\/O-8\%);
  --border-strong: var(--Outline\/O-12\%);
  --gold: var(--Main\/P-100\%);
  --gold-strong: var(--Primary\/110\%W);
  --gold-tint: var(--Primary\/5\%);
  --gold-ink: var(--Primary\/110\%W);
  --green: var(--Main\/P-100\%);
  --green-tint: var(--Primary\/5\%);
  --green-ink: var(--Primary\/110\%W);
  --danger: var(--Red\/100\%);
  --danger-tint: rgb(246 70 93 / 5%);
  --warn: var(--Yellow\/100\%);
  --warn-tint: rgb(245 183 24 / 5%);
  --info: var(--Green\/100\%);
  --info-tint: rgb(43 188 129 / 5%);
  --on-accent: var(--Text\/BB);
  --font-display: "MiSans VF", "MiSans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: "MiSans VF", "MiSans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "SFMono-Regular", Menlo, monospace;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --Primary\/110\%B: #2CE36C;
  --Primary\/110\%W: #02B43B;
  --Primary\/100\%: #06C84A;
  --Primary\/80\%: rgb(6 200 74 / 80%);
  --Primary\/40\%: rgb(6 200 74 / 40%);
  --Primary\/12\%: rgb(6 200 74 / 12%);
  --Primary\/5\%: rgb(6 200 74 / 5%);
  --Text\/O-100\%: #FAFAFA;
  --Text\/O-80\%: rgb(250 250 250 / 80%);
  --Text\/O-60\%: rgb(250 250 250 / 60%);
  --Text\/O-40\%: rgb(250 250 250 / 40%);
  --Text\/O-20\%: rgb(250 250 250 / 20%);
  --Text\/BW: #FFFFFF;
  --Text\/WB: #000000;
  --Main\/O-100\%: #FAFAFA;
  --Background\/O-0\%: #121212;
  --Background\/O-2\%: rgb(250 250 250 / 2%);
  --Background\/O-4\%: rgb(250 250 250 / 4%);
  --Cover\/O-2\%: rgb(250 250 250 / 2%);
  --Cover\/O-4\%: rgb(250 250 250 / 4%);
  --Cover\/O-8\%: rgb(250 250 250 / 8%);
  --Cover\/O-12\%: rgb(250 250 250 / 12%);
  --Cover\/O-16\%: rgb(250 250 250 / 16%);
  --Divider\/O-4\%: rgb(250 250 250 / 4%);
  --Divider\/O-8\%: rgb(250 250 250 / 8%);
  --Outline\/O-8\%: rgb(250 250 250 / 8%);
  --Outline\/O-12\%: rgb(250 250 250 / 12%);
  --Outline\/O-16\%: rgb(250 250 250 / 16%);
  --icon\/O-100\%: #FAFAFA;
  --icon\/O-60\%: rgb(250 250 250 / 60%);
  --icon\/O-40\%: rgb(250 250 250 / 40%);
  --icon\/BW: #FFFFFF;
  --icon\/WB: #000000;
  --Overlay-white\/White-0\%: rgb(255 255 255 / 0%);
}

html,
body {
  background: var(--Background\/O-0\%);
  color: var(--Text\/O-100\%);
  font-family: var(--font-body);
  font-weight: 420;
}

.page { background: var(--Background\/O-2\%); }
.phone,
.topbar,
.bottombar,
.form-head,
.form-body,
.query-body { background: var(--Background\/O-0\%); }
.phone { border-color: var(--Outline\/O-8\%); border-radius: var(--Radius\/24); box-shadow: none; }
.topbar { border-color: var(--Divider\/O-8\%); border-radius: var(--Radius\/24) var(--Radius\/24) 0 0; }
.brand-mark,
.footer-brand { color: var(--Main\/P-100\%); }
.proto-banner { color: var(--Text\/O-60\%); background: var(--Background\/O-0\%); border-color: var(--Outline\/O-12\%); border-radius: var(--Radius\/Full); box-shadow: none; }

.hero {
  background: radial-gradient(circle at 50% 62%, var(--Primary\/12\%), var(--Overlay-white\/White-0\%) 46%);
}
.hero h1,
.section h2 { color: var(--Text\/O-100\%); }
.hero h1 em,
.section-kicker { color: var(--Main\/P-100\%); }
.hero .lead,
.section p.desc { color: var(--Text\/O-60\%); }
.eyebrow,
.status-chip { color: var(--Primary\/110\%W); background: var(--Primary\/5\%); border-color: var(--Primary\/12\%); border-radius: var(--Radius\/Full); }
.hero-visual img { filter: hue-rotate(3deg) saturate(.94) drop-shadow(0 16px 20px var(--Primary\/12\%)); }

.btn {
  height: 48px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--Radius\/Full);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 420;
  gap: 8px;
  box-shadow: none;
}
.btn-primary { background: var(--Main\/P-100\%); color: var(--Text\/BB); }
.btn-primary:hover { background: var(--Primary\/80\%); }
.btn-primary:active { background: var(--Primary\/110\%W); }
.btn-primary:disabled { background: var(--Primary\/40\%); color: var(--Text\/BB); }
.btn-ghost { background: transparent; color: var(--Text\/O-100\%); border-color: var(--Outline\/O-12\%); }
.btn-ghost:hover { background: transparent; border-color: var(--Main\/O-100\%); }
.btn-ghost:active { background: var(--Cover\/O-4\%); border-color: var(--Outline\/O-12\%); }
.btn-sm { height: 36px; min-height: 36px; padding: 0 20px; font-size: 14px; gap: 6px; }
.btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 20px; height: 20px; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--Radius\/Full); animation:spec-spin .8s linear infinite; }
@keyframes spec-spin { to { transform: rotate(360deg); } }

.icon-btn,
.back-btn { width: 36px; height: 36px; color: var(--icon\/O-60\%); background: var(--Cover\/O-4\%); border-color: transparent; border-radius: var(--Radius\/Full); }
.icon-btn:hover,
.back-btn:hover { color: var(--icon\/O-100\%); border-color: var(--Main\/O-100\%); }

.impact-map,
.value-card,
.node-card,
.check-item,
.proto-card,
.receipt,
.result-card { box-shadow: none; border-color: var(--Outline\/O-8\%); }
.impact-map { background: var(--Cover\/O-2\%); border-radius: var(--Radius\/24); }
.impact-orbit { border-color: var(--Primary\/40\%); }
.impact-orbit::before,
.impact-orbit::after { background: var(--Main\/P-100\%); box-shadow: 0 0 0 4px var(--Primary\/12\%); }
.impact-stat { background: var(--Background\/O-0\%); border-color: var(--Outline\/O-8\%); border-radius: var(--Radius\/12); box-shadow: none; }
.impact-stat span,
.impact-copy span,
.value-card p,
.node-card .name,
.footer-link,
.footer-meta { color: var(--Text\/O-60\%); }
.value-card { background: var(--Background\/O-0\%); border-radius: var(--Radius\/16); }
.value-icon { color: var(--Main\/P-100\%); background: var(--Primary\/5\%); border-color: var(--Primary\/12\%); border-radius: var(--Radius\/12); box-shadow: none; }
.node-card { background: var(--Cover\/O-2\%); border-radius: var(--Radius\/16); }
.node-card.is-open { background: var(--Primary\/5\%); border-color: var(--Primary\/40\%); }
.node-card.is-open .tag { background: var(--Main\/P-100\%); color: var(--Text\/BB); }
.node-card:not(.is-open) .tag { background: var(--Cover\/O-8\%); color: var(--Text\/O-60\%); border-color: transparent; }
.check-item { background: var(--Cover\/O-2\%); border-radius: var(--Radius\/12); }
.check-item svg,
.proto-card .ic { color: var(--Main\/P-100\%); background: var(--Primary\/5\%); border-radius: var(--Radius\/8); }
.step .num { color: var(--Primary\/110\%W); background: var(--Primary\/5\%); border-color: var(--Primary\/12\%); }
.step::before { background: var(--Divider\/O-8\%); }
.proto-card { background: var(--Primary\/5\%); border-radius: var(--Radius\/16); }
.site-footer,
.foot-note { background: var(--Cover\/O-2\%); }
.site-footer { border-color: var(--Divider\/O-8\%); }
.footer-meta { border-color: var(--Divider\/O-8\%); }
.bottombar { border-color: var(--Divider\/O-8\%); border-radius: 0 0 var(--Radius\/24) var(--Radius\/24); }

.field { gap: 6px; }
.field label { color: var(--Text\/O-100\%); font-weight: 420; }
.field .hint,
.field .counter,
.legal-note,
.query-intro { color: var(--Text\/O-60\%); }
.field input[type="text"],
.field input[type="email"],
.field select {
  width: 100%;
  height: 48px;
  padding: 0 12px;
  color: var(--Text\/O-100\%);
  background: var(--Cover\/O-4\%);
  border: 1px solid transparent;
  border-radius: var(--Radius\/6);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 420;
  line-height: 1.5;
}
.field textarea {
  width: 100%;
  min-height: 80px;
  padding: 16px;
  color: var(--Text\/O-100\%);
  background: var(--Cover\/O-4\%);
  border: 1px solid transparent;
  border-radius: var(--Radius\/6);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 420;
  line-height: 1.5;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--Text\/O-20\%); }
.field input:hover,
.field select:hover,
.field textarea:hover,
.field input:focus,
.field select:focus,
.field textarea:focus { background: var(--Cover\/O-4\%); border-color: var(--Main\/O-100\%); outline: none; }
.field.err input,
.field.err select,
.field.err textarea { border-color: var(--Main\/R-100\%, var(--Red\/100\%)); }
.field .err-msg { color: var(--Main\/R-100\%, var(--Red\/100\%)); font-size: 12px; font-weight: 330; line-height: 1.5; }
.field input:disabled,
.field select:disabled,
.field textarea:disabled { color: var(--Text\/O-20\%); background: var(--Cover\/O-4\%); border-color: var(--Outline\/O-12\%); }
.static-badge { color: var(--Primary\/110\%W); background: var(--Primary\/5\%); border-radius: var(--Radius\/6); }
.agree-row { color: var(--Text\/O-60\%); background: var(--Cover\/O-4\%); border-color: var(--Outline\/O-8\%); border-radius: var(--Radius\/12); }
.agree-row.agreed { border-color: var(--Main\/P-100\%); }
.agree-row input { accent-color: var(--Main\/P-100\%); }
.agree-row .txt button { color: var(--Main\/P-100\%); }

.sheet-backdrop { background: var(--Mask\/BB-60\%); }
.sheet-panel { background: var(--Background\/O-0\%); border-radius: var(--Radius\/24) var(--Radius\/24) 0 0; box-shadow: none; }
.sheet-head,
.sheet-foot { border-color: var(--Divider\/O-8\%); }
.proto-doc h4 { border-color: var(--Divider\/O-8\%); }
.proto-doc th { background: var(--Cover\/O-4\%); }
.proto-doc th,
.proto-doc td { border-color: var(--Outline\/O-8\%); }
.proto-doc blockquote { background: var(--Cover\/O-4\%); border-color: var(--Main\/P-100\%); }

.tone-brand,
.tone-info { background: var(--Primary\/5\%); }
.tone-brand-strong { background: var(--Main\/P-100\%); border-color: var(--Main\/P-100\%); }
.tone-danger { background: rgb(246 70 93 / 5%); }
.tone-warn { background: rgb(245 183 24 / 5%); }
.status-pill.tone-brand-strong { color: var(--Text\/BB); }
.state-chip { color: var(--Text\/O-60\%); background: var(--Cover\/O-4\%); border-color: var(--Outline\/O-12\%); border-radius: var(--Radius\/Full); }
.state-chip.active { color: var(--Text\/BB); background: var(--Main\/P-100\%); border-color: var(--Main\/P-100\%); }

@media (max-width: 480px) {
  .page { background: var(--Background\/O-0\%); }
  .phone,
  .topbar,
  .bottombar { border-radius: 0; }
  .proto-banner { border-radius: var(--Radius\/12); }
}

/* CSS-safe runtime aliases. Each alias maps 1:1 to the Figma token named above;
   punctuation-heavy Figma names remain documented verbatim in the token table. */
:root,
:root[data-theme="light"] {
  --ws-main-p-100: #06C84A;              /* Main/P-100% */
  --ws-primary-110w: #02B43B;            /* Primary/110%W */
  --ws-primary-80: rgb(6 200 74 / 80%);  /* Primary/80% */
  --ws-primary-40: rgb(6 200 74 / 40%);  /* Primary/40% */
  --ws-primary-12: rgb(6 200 74 / 12%);  /* Primary/12% */
  --ws-primary-5: rgb(6 200 74 / 5%);    /* Primary/5% */
  --ws-red-100: #F6465D;                 /* Main/R-100% */
  --ws-green-100: #2BBC81;               /* Main/G-100% */
  --ws-yellow-100: #F5B718;              /* Main/Y-100% */
  --ws-text-100: #121212;                /* Text/O-100% */
  --ws-text-80: rgb(18 18 18 / 80%);     /* Text/O-80% */
  --ws-text-60: rgb(18 18 18 / 60%);     /* Text/O-60% */
  --ws-text-40: rgb(18 18 18 / 40%);     /* Text/O-40% */
  --ws-text-20: rgb(18 18 18 / 20%);     /* Text/O-20% */
  --ws-bg: #FFFFFF;                      /* Background/O-0% */
  --ws-cover-2: rgb(18 18 18 / 2%);      /* Cover/O-2% */
  --ws-cover-4: rgb(18 18 18 / 4%);      /* Cover/O-4% */
  --ws-cover-8: rgb(18 18 18 / 8%);      /* Cover/O-8% */
  --ws-cover-12: rgb(18 18 18 / 12%);    /* Cover/O-12% */
  --ws-outline-8: rgb(18 18 18 / 8%);    /* Outline/O-8% */
  --ws-outline-12: rgb(18 18 18 / 12%);  /* Outline/O-12% */
  --ws-outline-16: rgb(18 18 18 / 16%);  /* Outline/O-16% */
  --ws-main-o-100: #121212;              /* Main/O-100% */
  --ws-mask-60: rgb(0 0 0 / 60%);        /* Mask/BB-60% */
  --ws-text-on-primary: #000000;          /* Text/BB */
  --ws-text-fixed-white: #FFFFFF;         /* Text/WW */

  --bg: var(--ws-bg);
  --surface: var(--ws-bg);
  --surface-alt: var(--ws-cover-4);
  --surface-raised: var(--ws-bg);
  --ink: var(--ws-text-100);
  --ink-muted: var(--ws-text-60);
  --ink-faint: var(--ws-text-40);
  --border: var(--ws-outline-8);
  --border-strong: var(--ws-outline-12);
  --gold: var(--ws-main-p-100);
  --gold-strong: var(--ws-primary-110w);
  --gold-tint: var(--ws-primary-5);
  --gold-ink: var(--ws-primary-110w);
  --green: var(--ws-main-p-100);
  --green-tint: var(--ws-primary-5);
  --green-ink: var(--ws-primary-110w);
  --danger: var(--ws-red-100);
  --danger-tint: rgb(246 70 93 / 5%);
  --warn: var(--ws-yellow-100);
  --warn-tint: rgb(245 183 24 / 5%);
  --info: var(--ws-green-100);
  --info-tint: rgb(43 188 129 / 5%);
  --on-accent: var(--ws-text-on-primary);
}

:root[data-theme="dark"] {
  --ws-text-100: #FAFAFA;
  --ws-text-80: rgb(250 250 250 / 80%);
  --ws-text-60: rgb(250 250 250 / 60%);
  --ws-text-40: rgb(250 250 250 / 40%);
  --ws-text-20: rgb(250 250 250 / 20%);
  --ws-bg: #121212;
  --ws-cover-2: rgb(250 250 250 / 2%);
  --ws-cover-4: rgb(250 250 250 / 4%);
  --ws-cover-8: rgb(250 250 250 / 8%);
  --ws-cover-12: rgb(250 250 250 / 12%);
  --ws-outline-8: rgb(250 250 250 / 8%);
  --ws-outline-12: rgb(250 250 250 / 12%);
  --ws-outline-16: rgb(250 250 250 / 16%);
  --ws-main-o-100: #FAFAFA;
}

html,
body,
.phone,
.topbar,
.bottombar,
.form-head,
.form-body,
.query-body { background: var(--ws-bg); color: var(--ws-text-100); }
.page { background: var(--ws-cover-2); }
.brand-mark,
.footer-brand,
.hero h1 em,
.section-kicker { color: var(--ws-main-p-100); }
.hero { background: radial-gradient(circle at 50% 62%, var(--ws-primary-12), transparent 46%); }
.hero .lead,
.section p.desc,
.impact-stat span,
.impact-copy span,
.value-card p,
.node-card .name,
.footer-link,
.footer-meta { color: var(--ws-text-60); }
.eyebrow,
.status-chip { color: var(--ws-primary-110w); background: var(--ws-primary-5); border-color: var(--ws-primary-12); }

.btn-primary { background: var(--ws-main-p-100); color: var(--ws-text-on-primary); }
.btn-primary:hover { background: var(--ws-primary-80); }
.btn-primary:active { background: var(--ws-primary-110w); }
.btn-primary:disabled { background: var(--ws-primary-40); color: var(--ws-text-on-primary); }
.btn-ghost { background: transparent; color: var(--ws-text-100); border-color: var(--ws-outline-12); }
.btn-ghost:hover { background: transparent; border-color: var(--ws-main-o-100); }
.btn-ghost:active { background: var(--ws-cover-4); border-color: var(--ws-outline-12); }
.icon-btn,
.back-btn { color: var(--ws-text-60); background: var(--ws-cover-4); border-color: transparent; }
.icon-btn:hover,
.back-btn:hover { color: var(--ws-text-100); border-color: var(--ws-main-o-100); }

.impact-map { background: var(--ws-cover-2); border-color: var(--ws-outline-8); }
.impact-orbit { border-color: var(--ws-primary-40); }
.impact-orbit::before,
.impact-orbit::after { background: var(--ws-main-p-100); box-shadow: 0 0 0 4px var(--ws-primary-12); }
.impact-stat,
.value-card { background: var(--ws-bg); border-color: var(--ws-outline-8); }
.value-icon,
.check-item svg,
.proto-card .ic { color: var(--ws-main-p-100); background: var(--ws-primary-5); border-color: var(--ws-primary-12); }
.node-card,
.check-item { background: var(--ws-cover-2); border-color: var(--ws-outline-8); }
.node-card.is-open,
.proto-card { background: var(--ws-primary-5); border-color: var(--ws-primary-40); }
.node-card.is-open .tag { background: var(--ws-main-p-100); color: var(--ws-text-on-primary); }
.node-card:not(.is-open) .tag { background: var(--ws-cover-8); color: var(--ws-text-60); border-color: transparent; }
.step .num { color: var(--ws-primary-110w); background: var(--ws-primary-5); border-color: var(--ws-primary-12); }
.step::before { background: var(--ws-outline-8); }
.site-footer,
.foot-note { background: var(--ws-cover-2); }
.site-footer,
.footer-meta,
.bottombar { border-color: var(--ws-outline-8); }

.field label { color: var(--ws-text-100); }
.field .hint,
.field .counter,
.legal-note,
.query-intro { color: var(--ws-text-60); }
.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea { color: var(--ws-text-100); background: var(--ws-cover-4); border-color: transparent; }
.field input::placeholder,
.field textarea::placeholder { color: var(--ws-text-20); }
.field input:hover,
.field select:hover,
.field textarea:hover,
.field input:focus,
.field select:focus,
.field textarea:focus { background: var(--ws-cover-4); border-color: var(--ws-main-o-100); }
.field.err input,
.field.err select,
.field.err textarea { border-color: var(--ws-red-100); }
.field .err-msg { color: var(--ws-red-100); }
.field input:disabled,
.field select:disabled,
.field textarea:disabled { color: var(--ws-text-20); background: var(--ws-cover-4); border-color: var(--ws-outline-12); }
.static-badge { color: var(--ws-primary-110w); background: var(--ws-primary-5); }
.agree-row { color: var(--ws-text-60); background: var(--ws-cover-4); border-color: var(--ws-outline-8); }
.agree-row.agreed { border-color: var(--ws-main-p-100); }
.agree-row input { accent-color: var(--ws-main-p-100); }
.agree-row .txt button { color: var(--ws-main-p-100); }

.sheet-backdrop { background: var(--ws-mask-60); }
.sheet-panel { background: var(--ws-bg); }
.sheet-head,
.sheet-foot,
.proto-doc h4 { border-color: var(--ws-outline-8); }
.proto-doc th,
.proto-doc blockquote { background: var(--ws-cover-4); }
.proto-doc th,
.proto-doc td { border-color: var(--ws-outline-8); }
.proto-doc blockquote { border-left-color: var(--ws-main-p-100); }
.tone-brand,
.tone-info { background: var(--ws-primary-5); }
.tone-brand-strong { background: var(--ws-main-p-100); border-color: var(--ws-main-p-100); color: var(--ws-text-on-primary); }
.state-chip { color: var(--ws-text-60); background: var(--ws-cover-4); border-color: var(--ws-outline-12); }
.state-chip.active { color: var(--ws-text-on-primary); background: var(--ws-main-p-100); border-color: var(--ws-main-p-100); }