@import "./surface-design.css";
@import "./font-design.css";

/* Hosted workspace adapters consume the same tokens. Attributes and this file
   are added during website preparation; published standalone archives stay frozen. */
:root[data-family-workspace="lattice"] { --family-accent: var(--signal); --family-accent-strong: var(--signal-2); --family-accent-contrast: #ffffff; }
:root[data-family-workspace="html-editor"] { --family-accent: var(--accent-strong); --family-accent-strong: var(--accent-strong); --family-accent-contrast: #ffffff; }
:root[data-family-workspace]:is([data-theme="gray"], [data-theme="black"]) { --family-accent-contrast: #171717; }
:root[data-family-workspace="lattice"] #rail { background: var(--surface); border-color: var(--family-surface-border); box-shadow: var(--family-shadow-card); }
:root[data-family-workspace="lattice"] #stage { box-shadow: var(--family-shadow-card); }
:root[data-family-workspace="lattice"] .layer { background: var(--surface-soft); border-color: var(--family-surface-border); }
:root[data-family-workspace="lattice"] .chip:is([aria-pressed="true"], :active):not(:disabled) :is(.n, .d) { color: var(--ink); }
:root[data-family-workspace="html-editor"] :is(.bar, .files, .pane-tabs, .pane-bar) { background: var(--surface); }
:root[data-family-workspace="html-editor"] :is(dialog, [popover].menu) { background: var(--surface); border-color: var(--family-surface-border); box-shadow: var(--family-shadow-dialog); }
:root[data-family-workspace="html-editor"] button.primary { background: var(--family-accent); color: var(--family-accent-contrast); border-color: var(--family-accent); }
:root[data-family-workspace] button:not(:where(.divider, #editor-resize)) { transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease; }
:root[data-family-workspace] button:not(:where(.divider, #editor-resize)):hover:not(:disabled):not([aria-disabled="true"]) { background: color-mix(in srgb, var(--family-accent) 10%, var(--surface)); color: var(--ink); border-color: var(--family-accent); }
:root[data-family-workspace="html-editor"] button.primary:hover:not(:disabled) { background: var(--family-accent-strong); color: var(--family-accent-contrast); }
:root[data-family-workspace] button:is([aria-pressed="true"], [aria-selected="true"], [aria-current="true"]):not(:disabled):not([aria-disabled="true"]) { background: color-mix(in srgb, var(--family-accent) var(--family-selection-mix), var(--surface)); color: var(--ink); border-color: var(--family-accent); box-shadow: inset 0 0 0 1px var(--family-accent); }
:root[data-family-workspace] button:not(:where(.divider, #editor-resize)):active:not(:disabled):not([aria-disabled="true"]) { background: color-mix(in srgb, var(--family-accent) var(--family-press-mix), var(--surface)); color: var(--ink); border-color: var(--family-accent); box-shadow: inset 0 0 0 2px var(--family-accent); }

@media (prefers-reduced-motion: reduce) {
  :root[data-family-workspace] button { transition-duration: 0.01ms; }
}
@media (forced-colors: active) {
  :root[data-family-workspace] button:is([aria-pressed="true"], [aria-selected="true"], [aria-current="true"]) { outline: 2px solid Highlight; outline-offset: -3px; }
}