/* base — reset, tokens, typography. Friendly/Clean/Minimal. */
:root {
  --c-bg: #f4f7fb;
  --c-surface: #ffffff;
  --c-ink: #1f2a44;
  --c-ink-soft: #5a6b8c;
  --c-primary: #4361ee;
  --c-primary-ink: #ffffff;
  --c-accent: #ffd166;
  --c-correct: #06d6a0;
  --c-wrong: #ef8354;      /* cam mềm, không đỏ gắt */
  --c-target: #ffd166;
  --c-left: #b8c0ff;
  --c-right: #a0e8c0;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 6px 20px rgba(31, 42, 68, 0.10);
  --font: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --fs-base: 18px;
  --gap: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  color: var(--c-ink);
  background: var(--c-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }

#app { min-height: 100%; }

button { font-family: inherit; }

/* Accessibility toggles */
body.a11y-large { --fs-base: 22px; }
body.a11y-large .prompt { font-size: 2.4rem; }
body.a11y-large .key { min-width: 44px; }

body.a11y-contrast {
  --c-bg: #ffffff;
  --c-ink: #000000;
  --c-ink-soft: #222222;
  --c-primary: #0b3d91;
  --c-correct: #007a4d;
  --c-wrong: #b34700;
  --shadow: 0 0 0 2px #000;
}
body.a11y-contrast .card,
body.a11y-contrast .key { border: 2px solid #000; }

body.a11y-reduce * {
  animation-duration: 0.001ms !important;
  transition-duration: 0.001ms !important;
}

:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 2px;
}