:root {
  color-scheme: light dark;
  --color-brand: #81c400;
  --color-ink: light-dark(#596253, #bbc5b5);
  --color-ink-strong: light-dark(#242824, #edf1e8);
  --color-canvas: light-dark(#f7f8f5, #191d18);
  --color-surface: light-dark(#ffffff, #232822);
  --color-border: light-dark(#dce1d6, #414a3c);
  --color-input: light-dark(#fcfdfa, #1c211b);
  --color-input-border: light-dark(#89947e, #78866e);
  --color-selected: light-dark(#edf4df, #344322);
  --color-hover: light-dark(#f0f3ea, #30382c);
  --color-focus: light-dark(#527c00, #b3e560);
  --color-primary: light-dark(#242824, #dfe8d7);
  --color-on-primary: light-dark(#ffffff, #20271c);
  --color-primary-hover: light-dark(#3b5121, #c9e1ac);
  --color-danger: light-dark(#a72820, #ffb4a9);
  --color-danger-surface: light-dark(#fff0ed, #402622);
  --color-warning: light-dark(#785017, #efd09a);
  --color-warning-surface: light-dark(#fff7e6, #372f20);
  --color-success: light-dark(#365b1c, #c4dfaa);
  --color-success-surface: light-dark(#edf5e4, #293822);
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --content-width: 72rem;
  --form-width: 40rem;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }