/* Values used by the current Flat Fill Studio and Batch Recolor pages.
 * Primitive scales and semantic color roles live here; component rules use
 * these custom properties from liteworkroom-components.css. */
:root {
  color-scheme: light;
  --font-ui: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
  --font-display: "Trebuchet MS", Arial, sans-serif;
  --font-mono: Consolas, "SFMono-Regular", monospace;
  --color-ink: #252525;
  --color-ink-hover: #343434;
  --color-text-secondary: #686868;
  --color-bg-app: #f5f4f0;
  --color-bg-canvas: #ebebe8;
  --color-bg-structure: #f8f7f3;
  --color-bg-inspector: #fdfcf8;
  --color-bg-control: #ffffff;
  --color-border-subtle: #dddcd7;
  --color-border-control: #898989;
  --color-accent: #dceb9c;
  /* Secondary utility colors: never substitutes for the brand accent. */
  --color-opposite: #eab4a5;
  --color-opposite-bg: #eec3b7;
  --color-on-opposite: #613b32;
  --color-eyebrow-emphasis: #324b62;
  --color-on-accent: var(--color-ink);
  --editor-accent: var(--color-accent);
  --color-selection: #f0f4dd;
  --color-selection-border: #252525;
  --color-active-target: var(--color-focus);
  --color-keyboard-focus: var(--color-ink);
  --color-focus: #252525;
  --color-info: #555555;
  --color-info-bg: #f1f1ef;
  --color-success: #252525;
  --color-success-bg: #f0f4dd;
  --color-warning: #55504a;
  --color-warning-bg: #f1eee8;
  --color-red: #613b32;
  --color-reference: var(--color-red);
  --color-reference-mark: #c7352b;
  --color-tool-subtract-bg: var(--color-hover);
  --color-remove: var(--color-ink);
  --red-hover-tint: 6%;
  --color-remove-bg: var(--color-bg-control);
  --color-reference-bg: var(--color-opposite-bg);
  --color-red-hover: color-mix(in srgb, var(--color-red) var(--red-hover-tint), transparent);
  --color-red-pressed: color-mix(in srgb, var(--color-red) 9%, transparent);
  --color-lock: var(--color-ink);
  --color-lock-bg: #f0e6a4;
  --color-lock-overlay: var(--color-lock-bg);
  --color-hover: #eeede9;
  --color-guide-line: #252525;
  --color-guide-halo: #ffffff;
  --color-mask-ident: #dceb9c;
  --color-path: #252525;
  --color-path-control: rgb(37 37 37 / 55%);
  --color-path-anchor: #dceb9c;
  --color-slider: #252525;
  /* Error/destructive feedback remains separate from reference/Remove utility. */
  --color-red-strong: #9b3f32;
  --color-error: var(--color-red-strong);
  --color-destructive: var(--color-red-strong);
  --color-danger: var(--color-error);
  --color-danger-bg: #f6e8e4;

  --type-display: 500 clamp(50px, calc(4.3vw + 6px), 71px)/1.04 var(--font-display);
  /* Upload-only two-line title scales against its own text column. */
  --type-upload-display: 500 clamp(28px, 10.5cqw, 56px)/1.12 var(--font-display);
  --upload-stack-max: 720px;
  --upload-content-max: 1280px;
  --upload-header-height: 72px;
  --upload-box-radius: 24px;
  --color-upload-hover: color-mix(in srgb, var(--color-selection) 50%, var(--color-bg-inspector));
  --duration-upload-fill: 1100ms;
  --duration-upload-return: 600ms;
  --type-title-lg: 500 27px/33px var(--font-display);
  --type-title-md: 500 23px/31px var(--font-display);
  --type-title-sm: 600 18px/25px var(--font-display);
  --type-body-lg: 400 15px/25px var(--font-ui);
  --type-body: 400 13px/21px var(--font-ui);
  --type-label: 600 14px/20px var(--font-ui);
  --type-help: 400 12px/18px var(--font-ui);
  --type-meta: 500 12px/16px var(--font-ui);
  --type-eyebrow: 600 12px/16px var(--font-ui);
  --type-caption: 400 11px/15px var(--font-ui);
  --text-meta: 12px;
  --text-help: 12px;
  --text-body: 13px;
  --text-body-lg: 15px;
  --text-title-sm: 18px;
  --text-title-md: 23px;
  --text-title-lg: 27px;
  --text-caption: 11px;
  --space-0: 0;
  --space-micro: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 9px;
  --radius-round: 50%;
  --radius-pill: 999px;
  --border-width-default: 1px;
  --border-width-selected: 2px;
  --border-subtle: 1px solid var(--color-border-subtle);
  --border-control: 1px solid var(--color-border-control);
  --shadow-none: none;
  --shadow-control: 0 1px 3px rgb(37 37 37 / 7%);
  --shadow-floating: 0 2px 8px rgb(37 37 37 / 4%);
  --shadow-popover: 0 5px 20px rgb(37 37 37 / 13%);
  --shadow-dialog: 0 15px 65px rgb(37 37 37 / 14%);
  --control-height-compact: 32px;
  --control-height-default: 36px;
  --control-height-prominent: 40px;
  --icon-standard: 20px;
  --icon-compact: 18px;
  --icon-meta: 16px;
  --icon-stroke: 1.75;
  --duration-press: 100ms;
  --duration-fast: 140ms;
  --duration-standard: 180ms;
  --duration-slow: 240ms;
  /* Indeterminate activity cycle, not an interaction transition. */
  --duration-activity-cycle: 900ms;
  --ease-standard: cubic-bezier(.2,.8,.2,1);
  --z-base: 0;
  --z-sticky: 10;
  --z-app-bar: 20;
  --z-floating-tools: 30;
  --z-tooltip: 50;
  --z-toast: 70;
  --z-dialog: 80;
  --z-drag-overlay: 100;
  --app-bar-height: 60px;
  --structure-width: 256px;
  --inspector-width: 336px;
  --canvas-min-width: 300px;
  --canvas-chrome-inset: 12px;
  --colorway-card-width: clamp(176px,10vw,184px);
  /* Small additions retain the established interactions, without a new palette. */
  --button-primary-hover: var(--color-ink-hover);
  --button-disabled-opacity: .45;
  --overlay-scrim: rgb(37 37 37 / 26%);
  --control-swatch-outline: 0 0 0 1px var(--color-ink);
}
@media (max-width:1150px) {
  :root { --structure-width:216px; --inspector-width:300px; --canvas-min-width:270px; }
}
@media (max-width:930px) {
  :root { --structure-width:172px; --inspector-width:264px; --canvas-min-width:240px; --canvas-chrome-inset:8px; --colorway-card-width:172px; }
}