/* Default editor theme. Slide artwork keeps its own colors. */
:root {
  color-scheme: dark;
  --ink: #e8eaed;
  --muted: #a1a7b1;
  --line: #30343c;
  --accent: #e95840;
  --canvas: #14161b;
  --surface: #1d2026;
  --surface-raised: #242831;
  --surface-field: #191c22;
  --surface-hover: #2d323b;
  --text-secondary: #b9bec8;
  --accent-soft: #e9584026;
  --accent-text: #ff9d88;
}

html, body { background: var(--canvas); }
button, input, textarea, select { color: inherit; }
button:hover { background: var(--surface-hover); }
button:focus-visible, a:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible { outline-color: var(--accent); }
input::placeholder, textarea::placeholder { color: #9199a6; opacity: 1; }
input[type="range"] { accent-color: var(--accent); }

.topbar, .rail, .library, .studio-toolbar,
.filmstrip-area, .studio-footer, .notes-panel, .inspector {
  background: var(--surface);
  border-color: var(--line);
}
.project-icon, .rail-item, .breadcrumb, .canvas-intro,
.tiny-label, .canvas-caption, .filmstrip-heading, .slide-thumb-caption {
  color: var(--muted);
}
.breadcrumb strong, .filmstrip-heading .text-button,
.library-bottom strong, .studio-footer, .field label { color: var(--text-secondary); }
.eyebrow, .little-star { color: var(--accent-text); }
.library-bottom p { color: var(--muted); }
.rail-item.active { color: var(--accent-text); background: var(--accent-soft); }
.rail-bottom .rail-item > span { border-color: var(--muted); }

.button.subtle {
  background: var(--surface-raised);
  border-color: var(--line);
  color: var(--ink);
}
.button.subtle:hover { background: var(--surface-hover); }
.button.dark { background: var(--accent); color: #17110f; }
.button.dark:hover { background: #f17f52; }
.avatar {
  color: var(--text-secondary);
  background: var(--surface-raised);
  border-color: var(--surface);
  box-shadow: 0 0 0 1px var(--line);
}

.search-box { background: var(--surface-field); border-color: var(--line); }
.search-box span { color: var(--muted); }
.chip { background: var(--surface-raised); border-color: var(--line); }
.chip:hover { background: var(--surface-hover); }
.chip.active { background: var(--ink); border-color: var(--ink); color: #181b21; }
.template-thumb, .slide-thumb { border-color: #424752; }
.template-card:hover .template-thumb { box-shadow: 0 6px 15px #0005; }
.canvas-frame { box-shadow: 0 8px 28px #0005; }
.slide-element.editing { outline-color: var(--accent); }
.slide-element.selected::after { background: var(--ink); }
.slide-thumb-wrap.active .slide-thumb-caption { color: var(--ink); }
.slide-thumb-caption .thumb-number { background: #2d333d; color: var(--text-secondary); }
.slide-thumb-wrap.active .thumb-number { background: var(--accent-soft); color: var(--accent-text); }

.studio-return {
  color: var(--text-secondary);
  border-color: var(--line);
  background: var(--surface-field);
}
.studio-return:hover { color: var(--ink); background: var(--surface-hover); }
.notes-panel { box-shadow: 0 -10px 30px #0004; }
.notes-panel textarea, .field input, .field textarea, .field select {
  color: var(--ink);
  background: var(--surface-field);
  border-color: var(--line);
}
.field input[type="range"] { background: transparent; }
.bg-label input { border-color: #59616e; }
.inspector { box-shadow: -8px 0 30px #0002; }
.add-text-button, .element-choice, .wide-button {
  background: var(--surface-raised);
  border-color: var(--line);
}
.add-text-button:hover, .element-choice:hover, .wide-button:hover {
  background: var(--surface-hover);
  border-color: #505763;
}
.element-choice span { background: #f17f52; }
.element-choice[data-shape="ring"] span { border-color: #f17f52 !important; }
.element-choice b { color: var(--accent-text) !important; }
.swatch { border-color: var(--surface); box-shadow: 0 0 0 1px #59616e; }
.swatch:hover { box-shadow: 0 0 0 2px var(--ink); }
.upload-zone { background: var(--surface-field); border-color: #59616e; }
.upload-zone:hover { background: var(--surface-hover); border-color: var(--accent); }

.toast {
  background: var(--surface-raised);
  border: 1px solid #505763;
  color: var(--ink);
  box-shadow: 0 5px 20px #0006;
}
dialog {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid #424752;
  box-shadow: 0 20px 100px #0009;
}
dialog::backdrop { background: #080a0dbf; }
.modal-option { background: var(--surface-raised); }
.modal-option:hover { background: var(--surface-hover); border-color: #59616e; }
.help-list kbd { background: var(--surface-field); border-color: #505763; }
.presentation { background: var(--canvas); }
.presentation-controls { background: #20242cec; }

.library, .filmstrip, .canvas-area, .inspector, textarea {
  scrollbar-color: #505763 var(--surface);
  scrollbar-width: thin;
}

@media print {
  :root { color-scheme: light; }
  html, body { background: white; }
}