@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Space+Mono:wght@700&display=swap');

:root,
[data-theme="light"] {
  --ink: #1a1a2e;
  --paper: #f7f4ef;
  --mid: #c8c2b8;
  --accent: #e07c3a;
  --accent3: #5db87a;
  --danger: #e05030;
  --warning: #d4a843;
  --note: #7a7060;
  --card-bg: #ffffff;
  --header-bg: #1a1a2e;
  --card-border: #e0dbd4;
  --numkey-bg: #f9f7f4;
  --numkey-shadow: #c8c2b8;
  --font-main: 'Inter', system-ui, sans-serif;
  --font-mono: 'Space Mono', monospace;
}

[data-theme="dark"] {
  --ink: #e8e4de;
  --paper: #1a1a2e;
  --mid: #3a3a4e;
  --accent: #e07c3a;
  --accent3: #6dc88a;
  --danger: #e05030;
  --warning: #c4984a;
  --note: #a0a0a0;
  --card-bg: #252540;
  --header-bg: #252540;
  --card-border: #3a3a4e;
  --numkey-bg: #2a2a42;
  --numkey-shadow: #15152a;
}

[data-theme="autumn"] {
  --ink: #2c1810;
  --paper: #faf3e8;
  --mid: #d4b896;
  --accent: #c06020;
  --accent3: #4a9060;
  --danger: #c03020;
  --warning: #b89030;
  --note: #8a7060;
  --card-bg: #fff8f0;
  --header-bg: #2c1810;
  --card-border: #d4b896;
  --numkey-bg: #f5ead8;
  --numkey-shadow: #c8aa82;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: var(--font-main);
  background: var(--paper);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}