/* Shared appearance tokens. Keep the standalone dist copy identical. */
:root {
  color-scheme: light;
  --ui-bg: #faf6f0;
  --ui-surface: #ffffff;
  --ui-surface2: #f3ede2;
  --ui-surface3: #fcf9f4;
  --ui-text: #1c1917;
  --ui-muted: #78716c;
  --ui-border: #e7dfd3;
  --ui-input-border: #b8ab99;
  --ui-accent: #b45309;
  --ui-accent-hover: #92400e;
  --ui-on-accent: #ffffff;
  --ui-accent-soft: #fef3c7;
  --ui-accent-text: #92400e;
  --ui-success: #22674e;
  --ui-success-bg: #e5f3eb;
  --ui-warning: #865d12;
  --ui-warning-bg: #fff2d6;
  --ui-danger: #b33049;
  --ui-danger-bg: #fcebf0;
  --ui-info: #426195;
  --ui-info-bg: #e9effa;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --ui-bg: #161311;
    --ui-surface: #231e1a;
    --ui-surface2: #2e2722;
    --ui-surface3: #1c1815;
    --ui-text: #fcf8f2;
    --ui-muted: #b8aba0;
    --ui-border: #3d332c;
    --ui-input-border: #78695d;
    --ui-accent: #f59e0b;
    --ui-accent-hover: #fbbf24;
    --ui-on-accent: #1c1305;
    --ui-accent-soft: #452e0a;
    --ui-accent-text: #fde68a;
    --ui-success: #91d4b1;
    --ui-success-bg: #203c31;
    --ui-warning: #e6c276;
    --ui-warning-bg: #3d3321;
    --ui-danger: #f0a0af;
    --ui-danger-bg: #442933;
    --ui-info: #acc4f0;
    --ui-info-bg: #29354a;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ui-bg: #161311;
  --ui-surface: #231e1a;
  --ui-surface2: #2e2722;
  --ui-surface3: #1c1815;
  --ui-text: #fcf8f2;
  --ui-muted: #b8aba0;
  --ui-border: #3d332c;
  --ui-input-border: #78695d;
  --ui-accent: #f59e0b;
  --ui-accent-hover: #fbbf24;
  --ui-on-accent: #1c1305;
  --ui-accent-soft: #452e0a;
  --ui-accent-text: #fde68a;
  --ui-success: #91d4b1;
  --ui-success-bg: #203c31;
  --ui-warning: #e6c276;
  --ui-warning-bg: #3d3321;
  --ui-danger: #f0a0af;
  --ui-danger-bg: #442933;
  --ui-info: #acc4f0;
  --ui-info-bg: #29354a;
}

.theme-control {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0;
  color: var(--ui-muted);
  font-size: .82rem;
  font-weight: 500;
}
.theme-control select {
  width: auto;
  min-width: 6.75rem;
  min-height: 44px;
  margin: 0;
  padding: .5rem .65rem;
  border: 1px solid var(--ui-input-border);
  border-radius: 10px;
  background: var(--ui-surface);
  color: var(--ui-text);
  font: inherit;
  cursor: pointer;
}
.theme-control select:focus-visible {
  outline: 3px solid var(--ui-accent);
  outline-offset: 3px;
}

/* Feather menu icon, MIT licensed; source and license are in icons/. */
.menu-icon { display: inline-block; width: 20px; height: 20px; flex: 0 0 20px; background: currentColor; mask: url("./icons/menu.svg") center / contain no-repeat; }