/* Shared palette and appearance control for the shop and merchant studio. */
:root {
  color-scheme: light;
  --page: #f6f6f7;
  --surface: #ffffff;
  --surface-soft: #f5f5f7;
  --surface-raised: #ffffff;
  --field: #ffffff;
  --ink: #25262b;
  --muted: #686b75;
  --line: #e2e3e8;
  --accent-text: #b5232c;
  --accent-soft: #faf0f0;
  --gold-text: #846331;
  --gold-soft: #f3eee5;
  --focus: #a87724;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #111418;
  --surface: #1b1f25;
  --surface-soft: #22272f;
  --surface-raised: #242a32;
  --field: #15191f;
  --ink: #f0f1f4;
  --muted: #afb5c0;
  --line: #343b46;
  --accent-text: #ff858a;
  --accent-soft: #35242b;
  --gold-text: #dfbf86;
  --gold-soft: #302b24;
  --focus: #e2bb72;
}
body { color: var(--ink); background: var(--page); }
input, textarea, select { color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
:is(button,a,input,textarea,select):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.theme-picker { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--muted); font-size: 12px; }
.theme-picker svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--gold-text); }
.theme-picker select { cursor: pointer; font-size: 12px; line-height: 1.4; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.theme-picker select:hover { border-color: var(--focus); }
.login-appearance { position: absolute; top: 22px; inset-inline-end: 28px; }
.workspace-actions { display: flex; align-items: center; gap: 20px; }
dialog { background: var(--surface-raised); color: var(--ink); }
dialog::backdrop { background: #0b0e1480; }
.eyebrow { color: var(--gold-text); }
@media (max-width: 760px) {
  .theme-picker { font-size: 11px; gap: 5px; }
  .theme-picker select { font-size: 11px; padding: 5px 6px; }
  .theme-picker .theme-label { display: none; }
  .login-appearance { top: 14px; inset-inline-end: 16px; }
  .workspace-actions { flex-direction: column; align-items: flex-end; gap: 12px; }
}