:root {
  color-scheme: light;
  accent-color: var(--sage);

  --bg: #F7F5F1;
  --surface: #FFFFFF;
  --surface-2: #FBFAF7;
  --border: #E4E0D8;
  --text: #1E1C18;
  --text-muted: #6B6659;
  --text-faint: #9C9787;
  --sage: #2F5233;
  --sage-deep: #223D26;
  --sage-soft: #E8EEE6;
  --on-sage: #F7F5F1;
  --ok: #2F5233;
  --warn: #B25000;
  --danger: #A32B21;
  --focus: #2F5233;
  --shadow: 0 24px 60px -24px rgba(30, 28, 24, 0.18);
  --shadow-sm: 0 1px 2px rgba(30, 28, 24, 0.06);

  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 980px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #14150F;
  --surface: #1B1D15;
  --surface-2: #20221A;
  --border: #33352A;
  --text: #EDEBE2;
  --text-muted: #A6A896;
  --text-faint: #74765F;
  --sage: #7FB585;
  --sage-deep: #9BCB9E;
  --sage-soft: #1E2A1F;
  --on-sage: #14150F;
  --ok: #7FB585;
  --warn: #E0A458;
  --danger: #E0776C;
  --focus: #7FB585;
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #14150F;
    --surface: #1B1D15;
    --surface-2: #20221A;
    --border: #33352A;
    --text: #EDEBE2;
    --text-muted: #A6A896;
    --text-faint: #74765F;
    --sage: #7FB585;
    --sage-deep: #9BCB9E;
    --sage-soft: #1E2A1F;
    --on-sage: #14150F;
    --ok: #7FB585;
    --warn: #E0A458;
    --danger: #E0776C;
    --focus: #7FB585;
    --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
}

::selection { background: var(--sage-soft); color: var(--text); }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset;
  caret-color: var(--text);
  transition: background-color 9999s ease-out 0s;
}

.brand-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--sage);
}