/* Shared control finishes. Preview fills remain owned by the generated/imported theme. */
:root {
  --control-radius: 10px;
  --control-ink: #30402a;
  --control-fill: #fcfdfb;
  --control-hover: #f4f7ef;
  --control-pressed: #e5ecde;
  --control-border: #b9c4b1;
  --control-accent: #38662c;
  --control-accent-hover: #2f5725;
  --control-accent-pressed: #26471e;
  --control-focus: #38662c;
  --shadow-control: 0 1px 2px #26322014, 0 3px 6px -3px #2632201f;
  --shadow-control-hover: 0 2px 3px #26322012, 0 5px 10px -4px #26322026;
  --shadow-control-pressed: inset 0 1px 2px #26322014;
  --shadow-panel: 0 2px 4px -2px #2632200a, 0 8px 20px -12px #2632201a;
  --shadow-popover: 0 4px 8px -4px #26322024, 0 16px 40px -10px #26322033;
  --shadow-dialog: 0 8px 20px -8px #19231533, 0 32px 80px -20px #19231552;
}

/* Preserve each layout's responsive sizing; share material and feedback. */
:is(.app, dialog, .signup-nudge) :is(.studio-button, .small-button),
.palette-adjustments .stepper button,
#dialog-content button {
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  background: var(--control-fill);
  color: var(--control-ink);
  box-shadow: var(--shadow-control);
  font-weight: 600;
  line-height: 1.35;
  touch-action: manipulation;
  transition: background-color 140ms ease, border-color 140ms ease,
    box-shadow 140ms ease, transform 140ms ease;
}

:is(.app, dialog, .signup-nudge) :is(.save-primary, .green-button),
#dialog-content button {
  background: var(--control-accent);
  border-color: var(--control-accent);
  color: #fff;
  box-shadow: 0 1px 2px #24341b26, 0 4px 8px -4px #24341b40;
}

.app .text-button, dialog .text-button, .header summary {
  color: var(--control-ink);
  border-radius: 7px;
  font-weight: 500;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 140ms ease, background-color 140ms ease;
}
.project-toolbar .text-button { padding-inline: 8px; }
.header nav > button, .header summary { padding-inline: 8px; }
.header nav { gap: 10px; }
.header nav button:hover { text-decoration: none; }

/* One segmented-control treatment for workspace, appearance and showroom. */
.project-toolbar .workspace-tabs, .segmented, .showroom-scenes {
  border: 1px solid #cbd2c5;
  border-radius: 12px;
  padding: 4px;
  gap: 3px;
  background: #e3e7df;
  box-shadow: inset 0 1px 2px #26322008;
}
.project-toolbar .workspace-tabs button, .segmented button, .showroom-scenes button {
  border: 1px solid transparent;
  border-radius: 8px;
  color: #52604a;
  font-weight: 500;
  line-height: 1.35;
  touch-action: manipulation;
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.project-toolbar .workspace-tabs button[aria-selected=true],
.segmented button:is([aria-selected=true], [aria-pressed=true]),
.showroom-scenes button[aria-pressed=true] {
  border-color: #d1d8cb;
  background: var(--control-fill);
  color: #263820;
  box-shadow: 0 1px 3px #2632201a, 0 2px 5px -2px #2632201a;
}

/* Close controls have the same target and feedback in every dialog. */
.dialog-heading button, .signup-nudge #signup-nudge-close {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #d3dacf;
  border-radius: 50%;
  background: #e9ede5;
  color: var(--control-ink);
  font-size: 24px;
  line-height: 1;
  transition: background-color 140ms ease;
}
.copy-button {
  padding: 8px 10px;
  min-height: 32px;
  gap: 6px;
  border-radius: 8px;
  background: #30402a;
  box-shadow: var(--shadow-control);
  font-weight: 600;
}

/* Depth follows purpose: work surfaces, floating menus, then modal tasks. */
.preview-shell, .role-panel, .pair-panel, .audit-panel, .gradient-settings {
  box-shadow: var(--shadow-panel);
}
.account-menu .account-bar, .signup-nudge {
  border-color: #c2cdb9;
  box-shadow: var(--shadow-popover);
}
dialog {
  border-color: #c8d1c1;
  background: #f7f9f3;
  box-shadow: var(--shadow-dialog);
}
dialog::backdrop { background: #1e291d59; backdrop-filter: blur(5px); }
#toast { box-shadow: var(--shadow-popover); }
.code-box { background: #f0f3eb; box-shadow: inset 0 1px 3px #2632200a; }
.channel-inputs { box-shadow: inset 0 1px 2px #26322012; border: 1px solid #ccd3c6; }

/* Preview material changes do not paint over colors used by contrast checks. */
.sample-primary, .sample-secondary, .dash-primary, .state-button {
  border-radius: var(--control-radius);
  font-weight: 600;
  box-shadow: var(--shadow-control);
  transition: transform 140ms ease, box-shadow 140ms ease;
  touch-action: manipulation;
}
.state-button[data-state=hover] { box-shadow: var(--shadow-control-hover); }
.state-button[data-state=pressed] { box-shadow: var(--shadow-control-pressed); }
.state-button:disabled { box-shadow: none; }
.sample-card, .dash-metrics article, .dash-chart-panel, .dash-projects {
  box-shadow: var(--shadow-panel);
}
.palette-section .swatch { box-shadow: var(--shadow-control); }

/* Quiet slider thumbs replace the old metallic, multi-stop highlights. */
input[type=range]::-webkit-slider-thumb {
  background: #fcfdfb;
  border: 1px solid #aab79f;
  box-shadow: 0 1px 3px #26322033, 0 3px 7px -3px #26322033;
}
input[type=range]::-moz-range-thumb {
  background: #fcfdfb;
  border: 1px solid #aab79f;
  box-shadow: 0 1px 3px #26322033, 0 3px 7px -3px #26322033;
}

@media (hover: hover) {
  :is(.app, dialog, .signup-nudge) :is(.studio-button, .small-button):hover:not(:disabled),
  .palette-adjustments .stepper button:hover:not(:disabled) {
    background: var(--control-hover);
    border-color: #8d9f80;
    box-shadow: var(--shadow-control-hover);
    transform: translateY(-1px);
  }
  :is(.app, dialog, .signup-nudge) :is(.save-primary, .green-button):hover:not(:disabled),
  #dialog-content button:hover:not(:disabled) {
    background: var(--control-accent-hover);
    border-color: var(--control-accent-hover);
    color: #fff;
  }
  .header nav > button:hover, .header summary:hover,
  .project-toolbar .text-button:hover, .dialog-heading button:hover,
  .signup-nudge #signup-nudge-close:hover { background: #e0e7d9; }
  :is(.workspace-tabs, .segmented, .showroom-scenes) button:hover:not([aria-selected=true], [aria-pressed=true]) {
    background: #edf1e7;
    color: var(--control-ink);
  }
  .sample-primary:hover:not(:disabled), .sample-secondary:hover:not(:disabled), .dash-primary:hover:not(:disabled) {
    box-shadow: var(--shadow-control-hover);
    transform: translateY(-1px);
  }
  .palette-section .swatch:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-control-hover);
  }
}

:is(.app, dialog, .signup-nudge) :is(.studio-button, .small-button):active:not(:disabled),
.palette-adjustments .stepper button:active:not(:disabled),
#dialog-content button:active:not(:disabled) {
  background: var(--control-pressed);
  box-shadow: var(--shadow-control-pressed);
  transform: translateY(1px);
  transition-duration: 60ms;
}
:is(.app, dialog, .signup-nudge) :is(.save-primary, .green-button):active:not(:disabled),
#dialog-content button:active:not(:disabled) {
  background: var(--control-accent-pressed);
  border-color: var(--control-accent-pressed);
  color: #fff;
}
.sample-primary:active:not(:disabled), .sample-secondary:active:not(:disabled), .dash-primary:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: var(--shadow-control-pressed);
  transition-duration: 60ms;
}
:is(.workspace-tabs, .segmented, .showroom-scenes) button:active:not(:disabled) { box-shadow: inset 0 1px 3px #26322026; }

/* Focus is an outline, so hover elevation cannot erase it. */
:is(.studio-button, .small-button, .text-button, .copy-button):focus-visible,
:is(.workspace-tabs, .segmented, .showroom-scenes, .stepper, .dialog-heading) button:focus-visible,
.header summary:focus-visible, #signup-nudge-close:focus-visible, #dialog-content button:focus-visible {
  outline: 2px solid var(--control-focus);
  outline-offset: 3px;
}
:is(.app, dialog, .signup-nudge) :is(.studio-button, .small-button):disabled,
.palette-adjustments .stepper button:disabled {
  background: #e7ebe2;
  color: #727d68;
  border-color: #cbd3c4;
  opacity: 1;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

@media (pointer: coarse) {
  :is(.studio-button, .small-button, .text-button, .copy-button),
  .project-toolbar :is(.studio-button, .text-button),
  .theme-entry-actions .studio-button, .export-actions .small-button,
  .project-toolbar .workspace-tabs button, .segmented button,
  .palette-adjustments .stepper button, .dialog-heading button { min-height: 44px; }
  .palette-adjustments .stepper button, .dialog-heading button { min-width: 44px; }
}
@media (max-width: 650px) {
  .header nav { gap: 10px; }
  .header nav > button, .header summary { padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.app, dialog, .signup-nudge) :is(.studio-button, .small-button),
  .palette-adjustments .stepper button, #dialog-content button,
  .sample-primary, .sample-secondary, .dash-primary,
  .palette-section .swatch { transform: none !important; transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  dialog::backdrop { background: #1e291dbf; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --control-border: #64745a; }
  :is(.workspace-tabs, .segmented, .showroom-scenes) button:is([aria-selected=true], [aria-pressed=true]) { border-color: #64745a; }
}
@media (forced-colors: active) {
  :is(.workspace-tabs, .segmented, .showroom-scenes) button:is([aria-selected=true], [aria-pressed=true]) { border-color: Highlight; color: Highlight; }
}