:root {
  --canvas: #f0eee5;
  --ink: #262c23;
  --muted: #646b5e;
  --card: #faf8f0;
  --border: #262c2324;
  --header-bg: #f0eee5f5;
  --shadow: 0 8px 28px rgba(18, 20, 26, 0.06);
  --accent: #955b34;
  --cta: #a56b42;
  --cta-hover: #efbd93;
  --accent-soft: #a56b4218;
  --cta-ink: #ffffff;
  --input-bg: #fffef8;
  --success: #15803d;
  --danger: #b91c1c;
  --color-accent: var(--cta);
  --color-cyan: var(--accent);
  --color-bg: var(--canvas);
  --color-success: var(--success);
}

html {
  color-scheme: light;
  background: var(--canvas);
}

html[data-theme-mode="dark"] {
  color-scheme: dark;
  --canvas: #141713;
  --ink: #f3f0e8;
  --muted: #b4bbaa;
  --card: #20261d;
  --border: #ffffff24;
  --header-bg: #141713f5;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  --accent: #dfa778;
  --cta: #dfa778;
  --cta-ink: #211c16;
  --accent-soft: #dfa77818;
  --input-bg: #161d12;
  --success: #a9c491;
  --danger: #edada0;
  --color-bg: var(--canvas);
  background: var(--canvas);
}