:root {
  --layout-chrome: 240px;
  --tile-max: 52px;
  --tile-size: min(var(--tile-max), calc((100dvh - var(--layout-chrome)) / 6));
  --tile-gap: 5px;
  --tile-font-size: calc(var(--tile-size) * 0.5);
  --tile-border-width: 2px;
  --help-tile-size: calc(var(--tile-size) * 0.65);
  --help-tile-font-size: calc(var(--tile-size) * 0.333);
  --key-height: calc(var(--tile-size) * 0.9);
  --key-font-size: calc(var(--key-height) * 0.38);
  --key-font-size-wide: calc(var(--key-height) * 0.3);
  --key-gap: 5px;
  --board-width: calc(var(--tile-size) * 5 + var(--tile-gap) * 4);
  --font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color-scheme: dark;
  --color-surface: #1c1d24;
  --color-bg: var(--color-surface);
  --color-text: #ffffff;
  --color-text-muted: #a0a2a4;
  --color-border: #505054;
  --color-key: #5c5e62;
  --color-key-text: #ffffff;
  --color-tile-border: #5a5c5e;
  --color-tile-filled-border: #787c7e;
  --color-correct: #599652;
  --color-present: #c4a93d;
  --color-absent: #434448;
  --color-toast-bg: #ffffff;
  --color-toast-text: #1a1a1b;
  --color-modal-bg: var(--color-surface);
  --color-header-border: #505054;
  --color-menu-link: #7ec0ff;
  --color-menu-divider: #505054;
}

html[data-theme="light"] {
  color-scheme: light;
  --color-surface: #ececec;
  --color-bg: var(--color-surface);
  --color-text: #121213;
  --color-text-muted: #5c6062;
  --color-border: #b0b4b8;
  --color-key: #b8bcc0;
  --color-key-text: #121213;
  --color-tile-border: #6d7174;
  --color-tile-filled-border: #454748;
  --color-correct: #4a8f44;
  --color-present: #a88f2e;
  --color-absent: #787c7e;
  --color-toast-bg: var(--color-surface);
  --color-toast-text: #121213;
  --color-modal-bg: var(--color-surface);
  --color-header-border: #b0b4b8;
  --color-menu-link: #005bb5;
  --color-menu-divider: #b0b4b8;
}

@media (min-width: 481px) and (max-width: 1024px) {
  :root,
  html[data-theme="light"] {
    --layout-chrome: 250px;
    --tile-max: 50px;
    --key-height: clamp(46px, calc(var(--tile-size) * 0.92), 50px);
  }
}

@media (max-width: 480px) {
  :root,
  html[data-theme="light"] {
    --layout-chrome: 280px;
    --tile-max: 46px;
    --tile-size: min(var(--tile-max), calc((100dvh - var(--layout-chrome)) / 6));
    --tile-gap: 4px;
    --key-height: clamp(48px, 12vw, 54px);
    --key-font-size: 1rem;
    --key-font-size-wide: 0.8125rem;
    --key-gap: 5px;
  }
}