/* Sage + clay: warm secondary surfaces, without recoloring artwork or stock logos. */
:root {
  --clay:#b68a73;
  --clay-text:#d7b59f;
  --clay-muted:#b6a596;
  --warm-panel:#28231f;
  --warm-inset:#211d19;
  --warm-hover:#382e27;
  --warm-line:#b68a734a;
  --blue:var(--clay-text);
  --navy:var(--warm-panel);
}

/* The empty canvas feels like a warm work surface, not a separate blue app. */
#view-studio .preview-empty {
  background:radial-gradient(ellipse at 50% 42%,var(--secondary-glow),transparent 64%),linear-gradient(145deg,var(--warm-hover),var(--warm-inset));
}
#view-studio .preview-empty::before {
  opacity:.19;
  background-image:linear-gradient(var(--secondary-glow) 1px,transparent 1px),linear-gradient(90deg,var(--secondary-glow) 1px,transparent 1px);
}
#view-studio .preview-empty svg { color:var(--clay-text); }
#view-studio .preview-empty p { color:var(--clay-muted); }
#view-studio .active-model { background:var(--warm-panel);border-color:var(--warm-line);color:var(--clay-text); }
#view-studio .preview-bar button { background:var(--warm-panel);border-color:var(--warm-line);color:var(--clay-text); }
#view-studio .preview-bar button:hover { background:var(--warm-hover);border-color:var(--clay); }

#view-studio .sprite-trait-option { background:var(--warm-inset);border-color:var(--warm-line); }
#view-studio .sprite-trait-option.enabled {
  background:linear-gradient(110deg,var(--secondary-selection),var(--warm-panel) 75%);
  border-color:var(--warm-line);
}
#view-studio .sprite-switch { background:var(--panel-3);border-color:var(--secondary); }
#view-studio .sprite-switch i { background:var(--clay-muted); }
/* On/off is a functional signal: keep the enabled switch blue in every palette. */
#view-studio .sprite-toggle input:checked + .sprite-switch { background:#3478f6;border-color:#6da5ff; }
#view-studio .sprite-toggle input:checked + .sprite-switch i { background:#ffffff; }
#view-studio .sprite-toggle:hover input:checked + .sprite-switch { background:#2364da; }
#view-studio .sprite-toggle input:focus-visible + .sprite-switch { outline:2px solid #3478f6;outline-offset:3px; }
#view-studio .sprite-toggle strong { color:var(--paper); }
#view-studio .sprite-toggle small,#view-studio .sprite-frequency { color:var(--clay-muted); }
#view-studio .sprite-frequency { border-color:var(--warm-line); }
#view-studio .sprite-frequency input { accent-color:var(--clay-text); }
#view-studio .sprite-frequency output { color:var(--clay-text); }
#view-studio .sprite-trait-option.enabled .sprite-toggle strong b { color:var(--clay-text);border-color:var(--warm-line); }

/* Preserve chosen collection colors; only empty swatches inherit the UI palette. */
#view-studio .advanced-row { background:var(--warm-panel);border-color:var(--warm-line);color:var(--paper); }
#view-studio .advanced-row > svg { color:var(--clay-text); }
#view-studio .advanced-row.has-palette { background:linear-gradient(110deg,var(--secondary-selection),var(--warm-panel) 75%);border-color:var(--clay); }
#view-studio .advanced-row.has-palette small { color:var(--clay-text); }
#view-studio .palette-row-swatches i:not(.filled) { background:var(--warm-inset);border-color:var(--muted-2);box-shadow:inset 0 0 0 2px var(--warm-panel); }
#view-studio .palette-row-swatches i.filled { box-shadow:0 0 0 2px var(--warm-inset); }

#view-studio .style-trigger:hover,#view-studio .style-picker.open .style-trigger { background:var(--warm-panel);border-color:var(--clay); }
#view-studio .style-menu,#view-studio .style-option { background:var(--warm-inset);border-color:var(--warm-line);color:var(--paper); }
#view-studio .style-option:hover { background:var(--warm-hover); }
#view-studio .style-option.active { background:var(--warm-panel);box-shadow:inset 3px 0 var(--clay); }
#view-studio .quote-menu { background:var(--warm-inset);border-color:var(--warm-line); }
#view-studio .quote-search { background:var(--warm-panel);border-color:var(--warm-line);color:var(--clay-muted); }
#view-studio .quote-search:focus-within { color:var(--clay-text); }
#view-studio .quote-search input::placeholder { color:var(--clay-muted); }
#view-studio .quote-search kbd { background:var(--warm-inset);border-color:var(--warm-line);color:var(--clay-muted); }
#view-studio .quote-results { scrollbar-color:var(--secondary) var(--warm-inset); }
#view-studio .quote-results::-webkit-scrollbar-track { background:var(--warm-inset); }
#view-studio .quote-results::-webkit-scrollbar-thumb { background:var(--secondary);border-color:var(--warm-inset); }
#view-studio .quote-option { background:var(--warm-inset);border-color:var(--warm-line);color:var(--paper); }
#view-studio .quote-option:hover { background:var(--warm-hover); }
#view-studio .quote-option.active { background:linear-gradient(90deg,var(--secondary-selection),var(--warm-panel));box-shadow:inset 3px 0 var(--clay); }
#view-studio .quote-option .asset-price small { color:var(--clay-muted); }
#view-studio .quote-option > i { border-color:var(--warm-line); }
#view-studio .quote-option.active > i { background:var(--clay-text);border-color:var(--clay-text);color:var(--warm-inset); }
#view-studio .launch-economics { background:var(--warm-panel);border-color:var(--warm-line); }
#view-studio .launch-economics em { color:var(--clay-muted); }

#directionDialog { background:var(--warm-inset);border-color:var(--warm-line);border-radius:16px; }
#directionDialog .palette-slot { background:var(--warm-panel);border-color:var(--warm-line); }
#directionDialog .palette-slot.active { background:var(--warm-hover);border-color:var(--clay);box-shadow:inset 3px 0 var(--clay); }
#directionDialog .palette-slot.enabled:not(.active) { border-color:var(--secondary); }
#directionDialog .palette-slot:not(.enabled) .palette-slot-main > i { background:var(--warm-inset);border-color:var(--muted-2);box-shadow:inset 0 0 0 4px var(--warm-panel); }
#directionDialog .palette-slot-main small,#directionDialog .palette-slot-main em,#directionDialog .palette-brightness,#directionDialog .palette-wheel-note,#directionDialog .direction-reset { color:var(--clay-muted); }
#directionDialog .palette-slot-clear { color:var(--clay-muted);border-color:var(--warm-line); }
#directionDialog .palette-slot-clear:hover,#directionDialog .direction-reset:hover { color:var(--clay-text);background:var(--warm-hover); }
#directionDialog .palette-brightness output { color:var(--clay-text); }

/* Carry the same material into generation feedback and the page footer. */
#view-studio .rendering-overlay { background:radial-gradient(circle at 50% 40%,var(--secondary-glow),transparent 58%),var(--warm-inset); }
#view-studio .generation-crt-bezel { background:linear-gradient(145deg,var(--panel-3),var(--warm-inset) 45%,var(--warm-panel));border-color:var(--warm-line); }
#view-studio .generation-crt-console small { color:var(--clay-muted); }
#view-studio .generation-crt-console button { background:var(--warm-panel);border-color:var(--warm-line);color:var(--clay-text); }
#view-studio .generation-crt-console button:hover { background:var(--warm-hover);border-color:var(--clay);color:var(--paper); }
body > footer { background:var(--warm-inset);border-top-color:var(--warm-line); }
body > footer .footer-inner > p,body > footer .footer-links button,body > footer .footer-links a { color:var(--clay-muted); }
body > footer .footer-inner > small { color:var(--clay-muted); }
body > footer .footer-links button:hover,body > footer .footer-links a:hover { color:var(--clay-text); }