:root {
  color-scheme: light;

  --canvas: #f4f1e9;
  --surface: #fffdf7;
  --wash: #e9eee7;
  --footer: #e8e4da;
  --ink: #1e2b29;
  --muted: #5e6864;
  --line: #d1d4c9;
  --signal: #bd5b32;
  --signal-ink: #fffaf2;
  --shadow: 0 14px 30px rgb(30 43 41 / 7%);
}

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

  --canvas: #16201f;
  --surface: #20302e;
  --wash: #1b2927;
  --footer: #111a19;
  --ink: #f3f0e8;
  --muted: #c0c7bc;
  --line: #40504c;
  --signal: #f19a63;
  --signal-ink: #24140b;
  --shadow: 0 14px 30px rgb(0 0 0 / 18%);
}

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