:root {
  color-scheme: light;

  --color-bg: #f7f5ee;
  --color-surface: #eeeadc;
  --color-surface-raised: #fffdf7;
  --color-text: #20261d;
  --color-muted: #5e675a;
  --color-border: #d4d5c8;
  --color-accent: #b54e31;
  --color-accent-text: #fffaf4;
  --color-ink: #24342b;
  --color-ink-text: #f6f2e7;
  --color-ink-muted: #c9d2c5;
  --color-focus: rgb(181 78 49 / 0.2);
}

[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #171c18;
  --color-surface: #202820;
  --color-surface-raised: #2a342a;
  --color-text: #f2eee4;
  --color-muted: #bdc4b8;
  --color-border: #3c493d;
  --color-accent: #e88760;
  --color-accent-text: #25150f;
  --color-ink: #e7dfcd;
  --color-ink-text: #1d261f;
  --color-ink-muted: #4f5b51;
  --color-focus: rgb(232 135 96 / 0.25);
}

body, .site-header, .site-footer, .card, .button, .theme-toggle, .language-switcher, .form-field input, .form-field textarea, .form-field select {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}