:root {
  color-scheme: light;
  --font-ui: "Google Sans Flex", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bg: #f7f6f1;
  --surface: #fffefa;
  --text: #202124;
  --muted: #6b7280;
  --line: #dddad0;
  --accent: #2358c9;
  --accent-text: #ffffff;
  --paper: #fffefa;
  --sun: #fff1a8;
  --mint: #c9efd8;
  --sky: #cce3ff;
  --rose: #ffd7df;
}

:root[data-theme="dark"],
body.dark {
  color-scheme: dark;
  --bg: #18191d;
  --surface: #24262c;
  --text: #f4f5f7;
  --muted: #b8c0cc;
  --line: #3a3d46;
  --accent: #8bb0ff;
  --accent-text: #101318;
  --paper: #292c34;
  --sun: #5a501f;
  --mint: #224c35;
  --sky: #203f66;
  --rose: #5d2936;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
}

:root[data-font="google-sans"] { --font-ui: "Google Sans Flex", system-ui, -apple-system, "Segoe UI", sans-serif; }
:root[data-font="nunito"] { --font-ui: "Nunito", "Google Sans Flex", system-ui, -apple-system, "Segoe UI", sans-serif; }
:root[data-font="roboto"] { --font-ui: "Roboto", "Google Sans Flex", system-ui, -apple-system, "Segoe UI", sans-serif; }

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}