/* โทเคนทั้งหมดมาจาก DESIGN.md — ห้ามใส่ค่าสี/ขนาดดิบ ๆ ในไฟล์อื่น */
@import url('/fonts.css');

:root {
  /* จอมือถือเด็ก — ชุดกระดาษสมุดโรงเรียน */
  --paper: #F7F3E8;
  --board: #1E3A2E;
  --board-deep: #14251D;
  --chalk: #F2EBD3;
  --amber: #FF8A1F;
  --wood: #C9A227;
  --muted: #566549;

  /* จอกลาง — ชุดเวทีหรี่ไฟ */
  --stage-bg: #14251D;
  --stage-panel: #1E3A2E;
  --stage-text: #F2EBD3;
  --stage-accent: #FF8A1F;

  /* 4 ช่องตัวเลือก — สีคู่กับรูปทรงเสมอ ห้ามใช้สีอย่างเดียว */
  --ch-a: #C62828;  /* ▲ แดงชาด */
  --ch-b: #1565C0;  /* ● ฟ้าคราม */
  --ch-c: #EF9A00;  /* ■ เหลืองทอง */
  --ink-on-amber: #2A1A00;  /* ตัวหนังสือบนพื้นเหลือง/ส้ม — ตัวขาวบนเหลืองได้แค่ 2.26:1 ตกเกณฑ์ */
  --ch-d: #2E7D32;  /* ◆ เขียวใบตอง */

  --r-btn: 4px;
  --r-card: 8px;
  --r-max: 12px;

  --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px;

  --t-fast: 150ms;
  --t-base: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Anuphan', system-ui, sans-serif;
  font-weight: 300;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, .num {
  font-family: 'Chakra Petch', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.num { font-variant-numeric: tabular-nums; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}