:root {
  --theme-bg: #f2f0ec;
  --theme-panel: #ffffff;
  --theme-surface: #faf8f6;
  --theme-card: #ffffff;
  --theme-border: #dad7d2;
  --theme-text: #2c2c2c;
  --theme-muted: #6f6f6f;
  --theme-accent: #d32027;
  --theme-accent-dark: #a3161b;
  --theme-button-bg: #f8f6f3;
  --theme-button-text: #2c2c2c;
  --theme-button-ghost: transparent;
  --theme-button-primary-text: #ffffff;
  --theme-input-bg: #ffffff;
  --theme-badge-bg: #e3e3e3;
  --theme-chip-bg: transparent;
  --theme-chip-active-bg: var(--theme-accent);
  --theme-chip-active-text: #ffffff;
  --theme-placeholder-bg: #eeeeee;
  --theme-modal-bg: #ffffff;
  --theme-info-bg: #faf8f6;
  --theme-topbar-bg: #ffffff;
  --theme-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  --theme-shadow-card: 0 2px 6px rgba(0, 0, 0, 0.05);
  --theme-radius: 14px;
  --theme-radius-card: 12px;
  --theme-radius-small: 8px;
  --theme-radius-pill: 999px;
  --theme-focus: 0 0 0 3px rgba(211, 32, 39, 0.35);
}

:root {
  --bg: var(--theme-bg);
  --panel: var(--theme-panel);
  --border: var(--theme-border);
  --text: var(--theme-text);
  --muted: var(--theme-muted);
  --accent: var(--theme-accent);
  --accent-dark: var(--theme-accent-dark);
}

body {
  background: var(--theme-bg);
  color: var(--theme-text);
}

.topbar {
  background: var(--theme-topbar-bg);
  border-bottom: 1px solid var(--theme-border);
}

.logo-button {
  background: var(--theme-panel);
  border-radius: var(--theme-radius-pill);
}

.panel {
  background: var(--theme-panel);
  border-radius: var(--theme-radius);
  box-shadow: var(--theme-shadow);
}

.card,
.settings-image-card,
.modal-content {
  background: var(--theme-card);
  border-radius: var(--theme-radius-card);
  box-shadow: var(--theme-shadow-card);
}

.settings-section,
.info-row,
.viewer-frame,
.editor-frame {
  background: var(--theme-surface);
  border-radius: var(--theme-radius-card);
}

.image-frame {
  background: var(--theme-card);
  border-radius: var(--theme-radius-card);
}

.placeholder {
  background: var(--theme-placeholder-bg);
  color: var(--theme-muted);
}

.btn,
button,
input[type="submit"] {
  background: var(--theme-button-bg);
  color: var(--theme-button-text);
  border-color: var(--theme-border);
  border-radius: var(--theme-radius-small);
}

.btn.primary,
.btn.active {
  background: var(--theme-accent);
  border-color: var(--theme-accent);
  color: var(--theme-button-primary-text);
}

.btn.ghost {
  background: var(--theme-button-ghost);
}

.btn.danger {
  background: var(--theme-accent);
  color: var(--theme-button-primary-text);
}

.badge {
  background: var(--theme-badge-bg);
  border: 1px solid var(--theme-border);
  color: var(--theme-text);
}

.chip {
  background: var(--theme-chip-bg);
  border-radius: var(--theme-radius-small);
}

.chip.active {
  background: var(--theme-chip-active-bg);
  color: var(--theme-chip-active-text);
  border-color: var(--theme-chip-active-bg);
}

input[type="text"],
input[type="password"],
input[type="search"],
input[type="file"],
select,
textarea {
  background: var(--theme-input-bg);
  color: var(--theme-text);
  border-radius: var(--theme-radius-small);
  border-color: var(--theme-border);
}

a,
.btn,
button,
input,
select,
textarea {
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease,
    color 0.2s ease;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--theme-focus);
}