:root,
:root[data-theme="light"] {
  --color-canvas: #faf9f5;
  --color-surface: #ffffff;
  --color-surface-muted: #f5f2eb;
  --color-text: #1a1f14;
  --color-text-muted: #5a6654;
  --color-text-subtle: #7a9e6a;
  --color-primary: #3d5c2e;
  --color-primary-hover: #2e4622;
  --color-border: #c8dbbf;
  --color-border-muted: #e8ede4;
  --color-success: #3d5c2e;
  --color-warning: #d4933a;
  --color-danger: #b85c38;
  --color-focus: #3d5c2e;
  --color-overlay: rgba(26, 31, 20, 0.52);
  --color-shadow: rgba(26, 31, 20, 0.16);
}

:root[data-theme="dark"] {
  --color-canvas: #101711;
  --color-surface: #1a241b;
  --color-surface-muted: #202c21;
  --color-text: #edf3e9;
  --color-text-muted: #bccab8;
  --color-text-subtle: #a9d58a;
  --color-primary: #a9d58a;
  --color-primary-hover: #c1eb9d;
  --color-border: #405744;
  --color-border-muted: #2b3a2d;
  --color-success: #a9d58a;
  --color-warning: #f0c278;
  --color-danger: #ffad86;
  --color-focus: #c1eb9d;
  --color-overlay: rgba(0, 0, 0, 0.7);
  --color-shadow: rgba(0, 0, 0, 0.45);
}

:root {
  --ink: var(--color-text);
  --moss: var(--color-primary);
  --sage: var(--color-text-subtle);
  --mist: var(--color-border-muted);
  --parchment: var(--color-surface-muted);
  --cream: var(--color-canvas);
  --rust: var(--color-danger);
  --amber: var(--color-warning);
  --pale-sage: var(--color-border);
  --surface: var(--color-surface);
}

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] {
  --bg: var(--color-canvas);
  --card-bg: var(--color-surface);
  --border: var(--color-border);
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --text: var(--color-text);
  --text-muted: var(--color-text-muted);
}

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

:focus-visible { outline-color: var(--color-focus); }

html[data-theme="light"] {
  --admin-bg: #f5f7f2; --admin-surface: #ffffff; --admin-surface-hover: #edf3e9;
  --admin-border: rgba(26, 31, 20, 0.14); --admin-border-focus: #3d5c2e;
  --admin-text-main: #1a1f14; --admin-text-muted: #5a6654; --admin-text-dim: #7a8674;
  --admin-moss: #3d5c2e; --admin-moss-bright: #2e4622; --admin-sage: #5a6654;
  --admin-coral: #a84628; --admin-amber: #9a6415;
}

html[data-theme="dark"] {
  --admin-bg: #090e08; --admin-surface: #121a11; --admin-surface-hover: #182417;
  --admin-border: rgba(255, 255, 255, 0.12); --admin-border-focus: #a9d58a;
  --admin-text-main: #eef3eb; --admin-text-muted: #bccab8; --admin-text-dim: #8fa382;
  --admin-moss: #a9d58a; --admin-moss-bright: #c1eb9d; --admin-sage: #bccab8;
  --admin-coral: #ffad86; --admin-amber: #f0c278;
}

.settings-button {
  min-width: 44px; min-height: 44px; border: 1px solid var(--color-border);
  border-radius: 999px; background: var(--color-surface); color: var(--color-text);
  cursor: pointer; font-size: 1.15rem;
}
.settings-button:hover { background: var(--color-surface-muted); border-color: var(--color-primary); }
.settings-overlay, .account-overlay {
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: start center;
  padding: max(24px, env(safe-area-inset-top)) 16px 24px; overflow: auto;
  background: var(--color-overlay);
}
.settings-dialog, .account-dialog {
  width: min(620px, 100%); max-height: calc(100vh - 48px); overflow: auto;
  border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface);
  color: var(--color-text); box-shadow: 0 18px 60px var(--color-shadow);
}
.settings-header { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding: 22px 24px 16px; border-bottom: 1px solid var(--color-border-muted); }
.settings-eyebrow { color: var(--color-text-subtle); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.settings-header h2 { margin-top: 3px; color: var(--color-text); font: 600 1.7rem 'Cormorant Garamond', serif; }
.settings-body { display: grid; gap: 18px; padding: 20px 24px 24px; }
.settings-section { display: grid; gap: 10px; }
.settings-section h3 { color: var(--color-primary); font: 600 1.2rem 'Cormorant Garamond', serif; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--color-border-muted); cursor: pointer; }
.settings-row span { display: grid; gap: 3px; }
.settings-row small, .settings-account span { color: var(--color-text-muted); font-size: .78rem; }
.settings-row select { min-height: 40px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); padding: 6px 10px; }
.settings-account { display: grid; gap: 3px; padding: 12px; border-radius: 10px; background: var(--color-surface-muted); }
.settings-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.settings-actions .account-dropdown-item { min-height: 44px; border: 1px solid var(--color-border); border-radius: 100px; background: transparent; color: var(--color-text); padding: 8px 14px; cursor: pointer; font: inherit; }
.settings-actions .danger { color: var(--color-danger); border-color: var(--color-danger); }
.settings-status { min-height: 1.3em; color: var(--color-text-muted); font-size: .8rem; }
.account-modal-body { display: grid; gap: 18px; padding: 20px 24px 24px; }
.account-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.account-delete-confirm { min-height: 44px; border: 1px solid var(--color-danger); border-radius: 100px; background: var(--color-danger); color: #fff; padding: 8px 14px; cursor: pointer; font: inherit; }
.account-dialog--danger #deleteAccountMessage { color: var(--color-text-muted); line-height: 1.5; }
@media (max-width: 640px) {
  .settings-header, .settings-body { padding-left: 18px; padding-right: 18px; }
  .settings-row { align-items: start; flex-direction: column; gap: 8px; }
  .settings-row select { width: 100%; }
}