@import url('/assets/immutable/82fca92398cf4665/assets/design-tokens.css?v=27f9801f7e10');
body.theme-light{
  --ws-bg:var(--surface);--ws-ink:var(--ink);--ws-muted:var(--muted);--ws-line:var(--line);--ws-soft:var(--surface-soft);--ws-accent:var(--state-active-fg);
  --formula-panel-bg:var(--ws-bg);--formula-panel-ink:var(--ink);--formula-panel-line:var(--ws-line);
  --formula-button-bg:var(--btn-secondary-bg);--formula-button-line:var(--btn-secondary-border);--formula-status-ink:var(--muted);--formula-note-ink:var(--ws-muted);
  background-color:var(--surface)!important;color:var(--ink)!important;
}
/* Neutral product surfaces share the same tokens. */
html body.theme-light #workbenchWrapper{background-color:var(--surface-hover)!important}
html body.theme-light #topNavbar,
html body.theme-light #leftSidebar,
html body.theme-light #zoomDock,
html body.theme-light #paletteFlyout,
html body.theme-light #pageManagerDock,
html body.theme-light #langMenu,
html body.theme-light .selection-action-pill{background-color:var(--surface)!important;border-color:var(--ws-line)!important}
html body.theme-light #leftSidebar,
html body.theme-light #zoomDock,
html body.theme-light #pageManagerDock{box-shadow:none}
html body.theme-light #canvasCard{border-color:var(--ws-line)!important;box-shadow:none}
html body.theme-light #topNavbar .text-white,
html body.theme-light #topNavbar .text-slate-200,
html body.theme-light .text-white{color:var(--ink)!important}
html body.theme-light #topNavbar .text-emerald-300{color:var(--state-active-fg)!important}
html body.theme-light #topNavbar .bg-emerald-500\/20{background-color:var(--state-active-bg)!important}

/* Hover and active states are neutral; the mint accent is reserved for logo and focus. */
html body.theme-light #leftSidebar button:hover,
html body.theme-light #zoomDock button:hover,
html body.theme-light #pageManagerDock button:hover,
html body.theme-light #langMenu button:hover,
html body.theme-light .selection-action-pill button:hover,
html body.theme-light .workspace-tool-item:hover{background-color:var(--state-active-bg)!important;color:var(--ink)!important}
html body.theme-light #leftSidebar .tool-btn-active{background:var(--state-active-bg)!important;color:var(--state-active-fg)!important;box-shadow:none}
html body.theme-light #leftSidebar .tool-btn-active *{color:var(--ink)!important}

/* Export is the one compact primary action; add-page stays a secondary control. */
html body.theme-light #topNavbar #btnExport,
html body.theme-light #topNavbar #btnExport{background:var(--btn-primary-bg)!important;border-color:var(--btn-primary-border)!important;color:var(--btn-primary-fg)!important;box-shadow:none}
html body.theme-light #topNavbar #btnExport *,
html body.theme-light #topNavbar #btnExport *{color:var(--btn-primary-fg)!important}
html body.theme-light #topNavbar #btnExport:hover{background:var(--state-active-fg)!important;border-color:var(--state-active-fg)!important}
html body.theme-light #pageManagerDock #btnAddPage{background:var(--btn-secondary-bg)!important;border:1px solid var(--btn-secondary-border)!important;color:var(--btn-secondary-fg)!important;box-shadow:none}
html body.theme-light #pageManagerDock #btnAddPage *{color:var(--btn-secondary-fg)!important}
html body.theme-light #pageManagerDock #btnAddPage:hover{background:var(--surface-hover)!important}
html body.theme-light #pageManagerDock #pageIndicator{color:var(--ink)!important}
html body.theme-light .workspace-categories [aria-pressed=true]{background:var(--state-active-bg)!important;color:var(--state-active-fg)!important}
html body.theme-light .workspace-settings[open] summary{background:var(--state-active-bg)!important}

/* Cards, FAQ, guide and footer: white with cool borders; links hover in deep mint. */
html body.theme-light .feature-card,
html body.theme-light section.bg-slate-900\/60,
html body.theme-light section.bg-slate-900\/70,
html body.theme-light section.bg-gradient-to-r,
html body.theme-light details{border-color:var(--ws-line)!important}
html body.theme-light details[open]{background:var(--ws-soft)!important;border-color:var(--ws-line)!important}
html body.theme-light .bg-slate-800,html body.theme-light .bg-slate-800\/90,
html body.theme-light .bg-slate-900,html body.theme-light .bg-slate-900\/90{border-color:var(--ws-line)!important}
html body.theme-light footer,
html body.theme-light footer#globalFooter{background:var(--surface)!important;border-top-color:var(--ws-line)!important;border-color:var(--ws-line)!important}
html body.theme-light footer#globalFooter a:hover,
html body.theme-light #sitesDirectory100 a.group:hover{color:var(--state-active-fg)!important;border-color:var(--state-active-border)!important}
html body.theme-light footer#globalFooter .social-icon-btn:hover{border-color:var(--state-active-border)!important;background:var(--state-active-bg)!important;color:var(--state-active-fg)!important}
html body.theme-light .workspace-eyebrow,
html body.theme-light .workspace-guide-row button{color:var(--ws-accent)!important}

/* Formula panel and suggestions follow the brand instead of the old dark green. */
html body.theme-light #formula-actions,
html body.theme-light #formula-suggest{background:var(--formula-panel-bg)!important;color:var(--formula-panel-ink)!important;border-color:var(--formula-panel-line)!important;box-shadow:none}
html body.theme-light #formula-actions button,
html body.theme-light #formula-suggest button{background:var(--formula-button-bg)!important;color:var(--formula-panel-ink)!important;border-color:var(--formula-button-line)!important}
html body.theme-light #formula-actions p,
html body.theme-light #formula-suggest p{color:var(--formula-status-ink)!important}
html body.theme-light #formula-actions .fa-note{color:var(--formula-note-ink)!important}

html body.theme-light ::selection{background:var(--state-active-bg)}

/* Share button kept its dark-theme utilities, so its icon vanished on white. */
html body.theme-light #btnShareChalk{background:var(--surface)!important;border-color:var(--ws-line)!important;color:var(--ink)!important;border-radius:8px!important}
html body.theme-light #btnShareChalk:hover{background:var(--state-active-bg)!important}
html body.theme-light #btnShareChalk svg,html body.theme-light #btnShareChalk span{color:var(--ink)!important}
html body.theme-light .pro-dialog,html body.theme-light .pro-inspector{background:var(--surface);color:var(--ink);border-color:var(--ws-line)}
.pro-product-links{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin:12px 0}.pro-product-links a{min-height:44px;display:flex;align-items:center;color:var(--ws-accent)}
#workspacePricing{text-decoration:none;color:var(--ws-ink);display:inline-flex;align-items:center;min-height:44px}