/* Shared Designer Site palette and controls. Keep this file identical in all tools. */
:root {
  color-scheme: light;
  --ds-bg: #f4f5ef;
  --ds-surface: #ffffff;
  --ds-ink: #263022;
  --ds-muted: #68735f;
  --ds-line: #e1e6d9;
  --ds-lime: #d4ed83;
  --ds-soft: #edf3e2;
  --ds-green: #506a31;
  --ds-hover: #39482e;
  --ds-stage: #f0f2ea;
  --ds-radius: 8px;
  --bg: var(--ds-bg);
  --paper: var(--ds-surface);
  --surface: var(--ds-surface);
  --panel: var(--ds-surface);
  --panel2: var(--ds-soft);
  --ink: var(--ds-ink);
  --text: var(--ds-ink);
  --muted: var(--ds-muted);
  --line: var(--ds-line);
  --lime: var(--ds-lime);
  --accent: var(--ds-lime);
  --soft: var(--ds-soft);
  --green: var(--ds-green);
  --radius: 14px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html[data-designer-tool="impairment"] {
  --accent: var(--ds-green);
  --green: var(--ds-lime);
}
body { background: var(--ds-bg); color: var(--ds-ink); }
button, input, select, textarea { font-family: inherit; }
html[data-designer-tool] :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ds-green);
  outline-offset: 2px;
}
html[data-designer-tool] button:disabled { opacity: .38; cursor: default; }
html[data-designer-tool] :is(.brand-mark, .brandmark) {
  background: var(--ds-lime);
  color: var(--ds-ink);
  border-radius: 9px;
}
html[data-designer-tool] :is(.brand-domain, .wordmark span) { color: #87927c; }
html[data-designer-tool] :is(.primary-button, .button.primary, button.primary, button.accent, .card-bottom) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid var(--ds-ink);
  border-radius: var(--ds-radius);
  background: var(--ds-ink);
  color: #ffffff;
  font-size: 12px;
  font-weight: 550;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color .15s, border-color .15s;
}
html[data-designer-tool] :is(.primary-button, .button.primary, button.primary, button.accent):hover:not(:disabled),
html[data-designer-tool] .tool-card:hover .card-bottom {
  background: var(--ds-hover);
  border-color: var(--ds-hover);
  color: #ffffff;
}
html[data-designer-tool] :is(.secondary-button, .button.secondary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
  color: var(--ds-ink);
  font-size: 12px;
  font-weight: 550;
  line-height: 1.4;
}
html[data-designer-tool] :is(.secondary-button, .button.secondary):hover:not(:disabled) {
  background: var(--ds-soft);
  border-color: #a6bf82;
}
html[data-designer-tool] .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 9px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
  color: var(--ds-muted);
}
html[data-designer-tool] .icon-button.small { width: 36px; height: 36px; min-height: 36px; padding: 7px; }
html[data-designer-tool] .icon-button:hover:not(:disabled) {
  background: var(--ds-soft);
  color: var(--ds-ink);
}
html[data-designer-tool] .text-button { color: var(--ds-muted); }
html[data-designer-tool] .text-button:hover:not(:disabled) { color: var(--ds-green); }
html[data-designer-tool] input[type="range"] { accent-color: var(--ds-green); }
html[data-designer-tool] select { border-radius: var(--ds-radius); }
html[data-designer-tool] :is(.language-toggle, #language) {
  min-height: 42px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
  color: var(--ds-ink);
  font-size: 12px;
  font-weight: 550;
}
html[data-designer-tool] .language-toggle { min-width: 51px; padding: 7px; }
html[data-designer-tool] :is(.language-toggle, #language):hover { background: var(--ds-soft); }

/* Color Optimizer: replace the previous dark studio surfaces. */
[data-designer-tool="clone"] .site-header { background: var(--ds-surface); }
[data-designer-tool="clone"] :is(.local-badge, .file-types, .privacy-note, .look-footnote, .small-note, .range-caption, footer, #previewHint) { color: var(--ds-muted); }
[data-designer-tool="clone"] :is(.local-badge i, .art-spark) { color: var(--ds-green); }
[data-designer-tool="clone"] :is(.preview-panel, .preview-toolbar, .preview-bottom, .export-panel) { background: var(--ds-surface); }
[data-designer-tool="clone"] .stage { background: var(--ds-stage); }
[data-designer-tool="clone"] .art-back { background: var(--ds-soft); border-color: var(--ds-line); }
[data-designer-tool="clone"] .art-front { background: var(--ds-soft); border-color: #a6bf82; color: var(--ds-green); box-shadow: 0 10px 24px #26302212; }
[data-designer-tool="clone"] .art-spark { text-shadow: none; }
[data-designer-tool="clone"] .view-switch { background: var(--ds-soft); }
[data-designer-tool="clone"] .view-switch button.active { background: var(--ds-surface); color: var(--ds-ink); box-shadow: 0 1px 3px #28341c12; }
[data-designer-tool="clone"] .panel-tabs { padding: 7px; gap: 3px; }
[data-designer-tool="clone"] .panel-tabs > button { flex: 1; height: 38px; min-height: 38px; border: 0; border-radius: 6px; padding: 8px 5px; }
[data-designer-tool="clone"] .panel-tabs > button.active { background: var(--ds-soft); color: var(--ds-green); }
[data-designer-tool="clone"] .tab-count { background: var(--ds-soft); color: var(--ds-green); }
[data-designer-tool="clone"] :is(.section-label > span:last-child:not(:first-child), .strength-control output, .slider-row output, .quality-row output, .slider-row .reset-value, .look-card.active > span) { color: var(--ds-green); }
[data-designer-tool="clone"] .look-thumb { border-color: var(--ds-line); background: var(--ds-soft); }
[data-designer-tool="clone"] .look-card.active .look-thumb { border-color: var(--ds-green); box-shadow: 0 0 0 2px #506a3115; }
[data-designer-tool="clone"] .look-card .check { background: var(--ds-green); color: white; }
[data-designer-tool="clone"] .gallery button.active { border-color: var(--ds-green); box-shadow: 0 0 0 1px var(--ds-green); }
[data-designer-tool="clone"] .gallery span { color: white; }
[data-designer-tool="clone"] :is(input[type="text"], .filename-row select) { background: var(--ds-surface); border-color: var(--ds-line); color: var(--ds-ink); border-radius: var(--ds-radius); }
[data-designer-tool="clone"] input[type="text"]::placeholder { color: var(--ds-muted); }
[data-designer-tool="clone"] input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--ds-green) 0%, var(--ds-green) var(--fill,100%), var(--ds-line) var(--fill,100%), var(--ds-line) 100%); }
[data-designer-tool="clone"] input[type="range"]::-webkit-slider-thumb { background: var(--ds-green); outline-color: var(--ds-green); border-color: var(--ds-surface); }
[data-designer-tool="clone"] input[type="range"]::-moz-range-track { background: var(--ds-line); }
[data-designer-tool="clone"] input[type="range"]::-moz-range-progress,
[data-designer-tool="clone"] input[type="range"]::-moz-range-thumb { background: var(--ds-green); }
[data-designer-tool="clone"] .switch { background: var(--ds-line); border-color: #a6b298; }
[data-designer-tool="clone"] .switch[aria-checked="true"] { background: var(--ds-green); border-color: var(--ds-green); }
[data-designer-tool="clone"] .switch span,
[data-designer-tool="clone"] .switch[aria-checked="true"] span { background: white; }
[data-designer-tool="clone"] .wb-row > .button.active { background: var(--ds-soft); color: var(--ds-green); border-color: var(--ds-green); }
[data-designer-tool="clone"] .image-wrap { background: repeating-conic-gradient(#ecefe6 0% 25%, #e2e6dc 0% 50%) 50% / 18px 18px; box-shadow: 0 4px 18px #16261018; }
[data-designer-tool="clone"] .stage-notice { background: var(--ds-soft); }
[data-designer-tool="clone"] .drop-overlay { background: #edf3e2ed; border-color: var(--ds-green); color: var(--ds-green); }
[data-designer-tool="clone"] .busy { background: #f4f5efcc; color: var(--ds-green); }
[data-designer-tool="clone"] .spinner { border-color: var(--ds-line); border-top-color: var(--ds-green); }
[data-designer-tool="clone"] .success-mark { background: var(--ds-soft); color: var(--ds-green); }
[data-designer-tool="clone"] #toast { background: var(--ds-ink); color: white; box-shadow: 0 4px 18px #16261020; }
[data-designer-tool="clone"] :is(.preview-panel:fullscreen, .preview-panel.fullscreen-fallback) { background: var(--ds-stage); }

/* Landing page and accessibility tool use the same brand accents. */
[data-designer-tool="home"] :is(.tool-icon, .impairment .tool-icon, .clone .tool-icon) { background: var(--ds-soft); color: var(--ds-green); }
[data-designer-tool="home"] :is(.category, .impairment .category, .clone .category) { color: var(--ds-green); }
html[data-designer-tool="home"] .card-bottom { justify-content: space-between; }
[data-designer-tool="home"] .language-picker select { border: 1px solid var(--ds-line); background: var(--ds-surface); padding-left: 10px; }
[data-designer-tool="impairment"] .app-header { background: var(--ds-surface); }
[data-designer-tool="impairment"] .vision-option[aria-pressed="true"],
[data-designer-tool="impairment"] .viewport-option[aria-pressed="true"] { background: var(--ds-soft); border-color: var(--ds-green); }
[data-designer-tool="impairment"] .tool.active { background: var(--ds-soft); color: var(--ds-green); border-color: #a6bf82; }
@media (prefers-reduced-motion: reduce) {
  html[data-designer-tool] :is(button, .card-bottom) { transition: none; }
}