/* Quinn Project tokens: the four tile colours and tile shadows of the logo
   (claude/logo-kit.md, same as the book) and the book's colour code
   (Indonesian navy, pinyin red, English purple). No grey text. */
:root {
  --red: #E2483D;
  --red-d: #B5362D;
  --blue: #2F6FD0;
  --blue-d: #2457A6;
  --yellow: #F6B82A;
  --yellow-d: #C98F14;
  --green: #2E9E57;
  --green-d: #237A43;
  --navy: #1E2A5E;
  --purple: #7A3DB8;
  --pinyin: #D33A2C;
  --cream: #FFF6D9;
  --cream-2: #FFE8A8;
  --paper: #FFFDF6;
  --pink: #F9D7D3;
  --radius: 22px;
  --shadow: 0 6px 0 rgba(30, 42, 94, 0.12), 0 14px 30px rgba(30, 42, 94, 0.12);
  --f-head: "Fredoka", "Nunito", system-ui, sans-serif;
  --f-body: "Nunito", system-ui, sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--f-body);
  color: var(--navy);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { font-family: var(--f-head); line-height: 1.1; margin: 0 0 0.4em; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
.hidden { display: none !important; }

/* Chunky tile button, like the book's tiles */
.big-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 56px; padding: 0 1.6em;
  border: 0; border-radius: 18px;
  background: var(--red); color: #fff;
  font-family: var(--f-head); font-weight: 600; font-size: 1.15rem; text-decoration: none;
  box-shadow: 0 5px 0 var(--red-d);
  transition: transform 0.08s, box-shadow 0.08s;
}
.big-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--red-d); }
.big-btn.blue { background: var(--blue); box-shadow: 0 5px 0 var(--blue-d); }
.big-btn.green { background: var(--green); box-shadow: 0 5px 0 var(--green-d); }
.big-btn.yellow { background: var(--yellow); color: var(--navy); box-shadow: 0 5px 0 var(--yellow-d); }
.link-btn { background: none; border: 0; color: var(--blue); font-weight: 800; text-decoration: underline; padding: 0.6em; }

/* Logo (assets/logo, from the logo kit). The SVGs have only a viewBox, so the
   height is set here and the width follows. Keep clear space around it. */
.brand { display: inline-flex; flex: none; line-height: 0; }
.brand img { height: 56px; width: auto; display: block; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}