/* Shared workflow geometry and original surrounding site presentation.
   Workspace typography is scoped below; public pages retain their scale. */
.design-system:not([data-phase=empty]) {
  --type-title-lg:500 33px/41px var(--font-display);
  --type-title-md:500 29px/38px var(--font-display);
  --type-title-sm:600 22px/31px var(--font-display);
  --type-body-lg:400 19px/31px var(--font-ui);
  --type-body:400 17px/27px var(--font-ui);
  --type-label:600 18px/26px var(--font-ui);
  --type-help:400 16px/24px var(--font-ui);
  --type-meta:500 16px/23px var(--font-ui);
  --type-eyebrow:600 16px/23px var(--font-ui);
  --type-caption:400 15px/21px var(--font-ui);
  --text-meta:16px;
  --text-help:16px;
  --text-body:17px;
  --text-body-lg:19px;
  --text-title-sm:22px;
  --text-title-md:29px;
  --text-title-lg:33px;
  --text-caption:15px;
  --control-height-compact:40px;
  --control-height-default:44px;
  --control-height-prominent:48px;
  --icon-standard:24px;
  --icon-compact:22px;
  --icon-meta:20px;
  --app-bar-height:68px;
  --structure-width:232px;
  --inspector-width:320px;
  font:var(--type-body);
}

.design-system:not([data-phase=empty]) .eyebrow { font:var(--type-eyebrow); }
.design-system:not([data-phase=empty]) .workspace-site-menu { font:var(--type-body); }
.design-system:not([data-phase=empty]) .workspace-site-menu summary { font:var(--type-label); min-height:var(--control-height-default); }
.design-system:not([data-phase=empty]) .workspace-current-tool { font:var(--type-help); }
.design-system:not([data-phase=empty]) :is(.review-actions button,.reset-action,.result-tool,.result-select-all,.result-retry-button,.original-appearance-actions button) { min-height:var(--control-height-default); }
.design-system:not([data-phase=empty]) :is(.segment svg,.inspector-note svg,summary svg,.swatch-library-folder) { width:var(--icon-compact); height:var(--icon-compact); flex-shrink:0; }
.design-system:not([data-phase=empty]) .canvas-utilities { flex-wrap:wrap; gap:6px; }
.design-system:not([data-phase=empty]) .canvas-utilities button { min-width:var(--control-height-compact); }
.design-system:not([data-phase=empty]) .zoom-controls output { min-width:48px; }
.design-system:not([data-phase=empty]) .layer { min-height:var(--workspace-layer-height,54px); }
.design-system:not([data-phase=empty]) .layer-name { min-width:0; white-space:normal; overflow-wrap:anywhere; }
.design-system:not([data-phase=empty]) .layer-name small { white-space:normal; overflow-wrap:anywhere; }
.design-system:not([data-phase=empty]) .pattern-tools [data-tip]:first-child:after { left:0; transform:none; }
.design-system:not([data-phase=empty]) .pattern-tools [data-tip]:last-child:after { left:auto; right:0; transform:none; }
.design-system:not([data-phase=empty]) .cc-heading small { line-height:var(--workspace-leading-meta,23px); }
.design-system:not([data-phase=empty]) .cc-card[data-fill-count="1"] { flex-basis:120px; }
.design-system:not([data-phase=empty]) .cc-card[data-fill-count="2"] { flex-basis:148px; }
.design-system:not([data-phase=empty]) :is(.quick-colors .quick-color,.palette-quick-actions .quick-color) { width:var(--workspace-swatch-compact,36px); height:var(--workspace-swatch-compact,36px); }
.design-system:not([data-phase=empty]) .measurement { grid-template-columns:minmax(0,1fr) 72px 60px; }
.design-system:not([data-phase=empty]) .ase-upload-button { font:var(--type-help); white-space:normal; text-align:center; }
.design-system:not([data-phase=empty]) :is(.selected-color-add,.swatch-library-add,.swatch-library-close,.swatch-library-select-all) { width:var(--control-height-compact); height:var(--control-height-default); }
.design-system:not([data-phase=empty]) .swatch-library-heading { grid-template-columns:minmax(0,1fr) var(--control-height-compact) var(--control-height-compact); }
.design-system:not([data-phase=empty]) :is(.result-tool-icon,.result-select-all,.result-retry-button) { width:var(--control-height-default); }
.design-system:not([data-phase=empty]) .result-card-icon { width:var(--control-height-compact); height:var(--control-height-compact); }
.design-system:not([data-phase=empty]) .result-card-icon svg { width:var(--icon-compact); height:var(--icon-compact); }
.design-system:not([data-phase=empty]) :is(.palette-row,.palette-batch-swatch,.background-choice) { width:var(--control-height-compact); height:var(--control-height-compact); }
.design-system:not([data-phase=empty]) .palette-row .secondary-button { width:24px; height:24px; min-width:24px; min-height:24px; }
.design-system:not([data-phase=empty]) .palette-row .secondary-button svg { width:16px; height:16px; }
.design-system:not([data-phase=empty]) #recolor-button::after { width:var(--icon-standard); height:var(--icon-standard); }
/* Preserve field widths; match the adjacent action to the shared compact size. */
.design-system:not([data-phase=empty]) :is(.studio-color-values,.selected-color-preview) { grid-template-columns:36px minmax(0,1fr) 88px var(--control-height-compact); }
.design-system:not([data-phase=empty]) :is(#st-color-format,#color-format) { width:88px; }
@media(max-width:1150px) {
  .design-system:not([data-phase=empty]) { --structure-width:200px; --inspector-width:300px; }
  .studio:not([data-phase=empty]) { --structure-width:220px; }
  .batch-design-system:not([data-phase=empty]) { --inspector-width:365px; }
  .design-system:not([data-phase=empty]) :is(.studio-color-values,.selected-color-preview) { grid-template-columns:36px minmax(0,1fr) var(--control-height-compact); }
}
@media(max-width:930px) {
  .design-system:not([data-phase=empty]) { --structure-width:160px; --inspector-width:264px; }
  .design-system:not([data-phase=empty]) .workspace-modes button { padding-inline:8px; min-width:84px; }
  .design-system:not([data-phase=empty]) .canvas-utilities button { min-width:32px; }
  .design-system:not([data-phase=empty]) .zoom-controls output { min-width:40px; }
  .design-system:not([data-phase=empty]) .measurement { grid-template-columns:minmax(0,1fr) 64px 56px; }
}
@media(max-width:720px) {
  .design-system:not([data-phase=empty]) .result-card-actions { gap:2px; top:8px; right:8px; }
  .design-system:not([data-phase=empty]) .result-card-icon { width:var(--workspace-swatch-compact,36px); height:var(--workspace-swatch-compact,36px); }
}

.design-system:not([data-phase=empty]) .pattern-tools { flex-wrap:wrap; }

/* Workspace-only role scale. Owner refinement 2026-10-21 prioritizes more
   Colorways space with slimmer shared panels and smaller routine controls.
   Helper/caption text uses 12px; Flat detail exceptions live in its tool CSS.
   Controls use the existing 48→44→40→36→32 ladder, icons 24→22→20→18.
   Keep font families/weights and the explicitly requested 27px large title.
   Do not bind these aliases on the app root: brand/public UI stays unchanged.
   The Workspace Tools menu explicitly shares the compact control roles. */
.design-system:not([data-phase=empty]) :is(.workbench,.processing,.compact-workspace-notice,#st-toast,#st-dialog,#st-drop-cover,.workspace-modes,.workspace-site-menu,.app-actions,#batch-help),
.batch-design-system:not([data-phase=empty]) :is(main.shell,#batch-dialog,.upload-drag-overlay) {
  --workspace-text-title-lg:27px;
  --workspace-text-title-md:19px;
  --workspace-text-title-sm:18px;
  --workspace-text-body-lg:17px;
  --workspace-text-body:14px;
  --workspace-text-label:14px;
  --workspace-text-help:12px;
  --workspace-text-meta:14px;
  --workspace-text-eyebrow:var(--eyebrow-size,14px);
  --workspace-text-caption:12px;
  --workspace-leading-meta:20px;
  --workspace-type-title-lg:500 var(--workspace-text-title-lg)/35px var(--font-display);
  --workspace-type-title-md:500 var(--workspace-text-title-md)/27px var(--font-display);
  --workspace-type-title-sm:600 var(--workspace-text-title-sm)/26px var(--font-display);
  --workspace-type-body-lg:400 var(--workspace-text-body-lg)/24px var(--font-ui);
  --workspace-type-body:400 var(--workspace-text-body)/20px var(--font-ui);
  --workspace-type-label:600 var(--workspace-text-label)/20px var(--font-ui);
  --workspace-type-help:400 var(--workspace-text-help)/16px var(--font-ui);
  --workspace-type-panel-description:400 14px/20px var(--font-ui);
  --workspace-type-meta:500 var(--workspace-text-meta)/var(--workspace-leading-meta) var(--font-ui);
  --workspace-type-eyebrow:600 var(--workspace-text-eyebrow)/var(--eyebrow-leading,20px) var(--font-ui);
  --workspace-type-caption:400 var(--workspace-text-caption)/16px var(--font-ui);
  --workspace-control-compact:32px;
  --workspace-control-default:36px;
  --workspace-control-prominent:40px;
  --workspace-swatch-compact:32px;
  --workspace-icon-standard:20px;
  --workspace-icon-compact:18px;
  --workspace-icon-meta:18px;
  --workspace-layer-height:var(--space-12);
  --workspace-control-gap:var(--space-1);
  --workspace-action-padding:var(--space-3);
  --control-height-compact:var(--workspace-control-compact);
  --control-height-default:var(--workspace-control-default);
  --control-height-prominent:var(--workspace-control-prominent);
  --icon-standard:var(--workspace-icon-standard);
  --icon-compact:var(--workspace-icon-compact);
  --icon-meta:var(--workspace-icon-meta);
  /* Bridge existing semantic consumers, including dialogs/tooltips/exports.
     Components retain their own role-specific weights and mono values. */
  --type-title-lg:var(--workspace-type-title-lg);
  --type-title-md:var(--workspace-type-title-md);
  --type-title-sm:var(--workspace-type-title-sm);
  --type-body-lg:var(--workspace-type-body-lg);
  --type-body:var(--workspace-type-body);
  --type-label:var(--workspace-type-label);
  --type-help:var(--workspace-type-help);
  --type-meta:var(--workspace-type-meta);
  --type-eyebrow:var(--workspace-type-eyebrow);
  --type-caption:var(--workspace-type-caption);
  --text-title-lg:var(--workspace-text-title-lg);
  --text-title-md:var(--workspace-text-title-md);
  --text-title-sm:var(--workspace-text-title-sm);
  --text-body-lg:var(--workspace-text-body-lg);
  --text-body:var(--workspace-text-body);
  --text-help:var(--workspace-text-help);
  --text-meta:var(--workspace-text-meta);
  --text-caption:var(--workspace-text-caption);
  font:var(--workspace-container-type,var(--type-body));
}
/* This scope root is itself auxiliary copy rather than a body container. */
.design-system:not([data-phase=empty]) .compact-workspace-notice { --workspace-container-type:var(--type-help); }

/* Both tools share regular button text, including legacy body/help consumers. */
.design-system:not([data-phase=empty]) :is(.workbench,main.shell,dialog) :is(.primary,.secondary,.quiet,.primary-button,.secondary-button,.result-tool,.result-retry-button,.result-primary-action,.ase-upload-button) { font-size:var(--workspace-text-label); line-height:20px; }
.design-system:not([data-phase=empty]) :is(.base-description,.base-description p,.panel-description,.batch-description) { font:var(--workspace-type-panel-description); }
.design-system:not([data-phase=empty]) #batch-colors-empty { font:var(--type-help); }
.design-system:not([data-phase=empty]) .range-labels { font-size:var(--workspace-text-help); line-height:16px; }

/* Compact nearby settings, not the overall workspace or image viewport. */
.design-system:not([data-phase=empty]) :is(.workbench,main.shell,dialog) :where(.primary,.secondary,.quiet,.result-tool):not(:where(.icon-button,.result-tool-icon,.result-select-all,.result-retry-button,.palette-row button)) { padding-inline:var(--workspace-action-padding); }
.design-system:not([data-phase=empty]) :is(.workbench,main.shell,dialog,.workspace-modes) :is(button,.result-primary-action) { gap:var(--workspace-control-gap); }
.design-system:not([data-phase=empty]) .workspace-modes button { padding-inline:var(--workspace-action-padding); }
.design-system:not([data-phase=empty]) .workspace-site-menu summary { padding-inline:var(--workspace-action-padding); }
.design-system:not([data-phase=empty]) :is(.workbench,main.shell,dialog) :is(.inspector-section,.property-group) { gap:var(--space-2); }
.design-system:not([data-phase=empty]) .inspector-section { padding-block:var(--space-5); }
.design-system:not([data-phase=empty]) .property-group { padding-bottom:var(--space-4); }
.design-system:not([data-phase=empty]) :is(.workbench,main.shell,dialog) :where(input:not([type=range]):not([type=color]):not([type=checkbox]):not([type=radio]),select) { padding-block:var(--space-1); }
.design-system:not([data-phase=empty]) .studio-color-fields input { padding-block:var(--space-micro); }
.design-system:not([data-phase=empty]) .pattern-library { grid-template-columns:repeat(auto-fill,var(--control-height-default)); }
.design-system:not([data-phase=empty]) .pattern-library button { width:var(--control-height-default); height:var(--control-height-default); }

/* Existing touch protection takes precedence over desktop density. */
@media(pointer:coarse) {
  .design-system:not([data-phase=empty]) :is(.workbench,main.shell,.workspace-modes,.workspace-site-menu,.app-actions,#batch-help,dialog) {
    --workspace-control-compact:44px;
    --workspace-control-default:44px;
    --workspace-control-prominent:44px;
  }
}

/* Workspace signature: existing logo and current tool, on one line. */
.design-system:not([data-phase=empty]) .brand { gap:8px; }
.workspace-brand-name { font:400 14px/1.4 var(--font-ui); color:var(--color-ink); letter-spacing:normal; white-space:nowrap; }

/* Keep format beside the value at narrow desktop/tablet panel widths. */
.design-system:not([data-phase=empty]) :is(.studio-color-values,.selected-color-preview) { grid-template-columns:32px minmax(0,1fr) 64px var(--control-height-compact); gap:4px; }
.design-system:not([data-phase=empty]) :is(#st-color-format,#color-format) { width:64px; min-width:0; padding-inline:4px; font:400 12px/16px var(--font-ui); grid-column:3; grid-row:1; }
.design-system:not([data-phase=empty]) :is(.studio-color-values>.studio-eyedropper,.selected-color-preview .selected-color-add) { grid-column:4; grid-row:1; }
.design-system:not([data-phase=empty]) .studio-color-fields { min-width:0; }