/* ============================================================
   Bright Kids by HeyPhu — Design Tokens  v0.1
   Visual Direction: Playful Product — "กล่องดินสอสีพาสเทล"
   ทุกค่าสีในโปรเจกต์ต้องอ้างตัวแปรในไฟล์นี้ ห้าม hardcode hex ในคอมโพเนนต์
   ============================================================ */

:root {
  /* ---------- Color: roles ---------- */
  --bg:            #FFF8F0;   /* ครีมอุ่น — พื้นหลังหลัก */
  --bg-deep:       #FDEEDF;   /* พื้นหลังรอง เช่น level map */
  --surface:       #FFFFFF;   /* การ์ด ปุ่ม พื้นผิวลอย */
  --surface-sunk:  #F6EFE7;   /* ช่องว่าง input, track */

  --primary:       #FF8A65;   /* ส้มพีช — ปุ่มหลัก / CTA */
  --primary-dark:  #E8663D;   /* hover / เงาปุ่ม */
  --primary-soft:  #FFE0D4;   /* พื้นอ่อนของ primary */

  --accent:        #2FA795;   /* มิ้นต์เข้ม — สถานะถูกต้อง (ผ่าน AA บนขาว) */
  --accent-bright: #4DD0C4;   /* มิ้นต์สด — ใช้เป็นพื้น/ไอคอนเท่านั้น ห้ามใช้กับตัวอักษรเล็ก */
  --accent-soft:   #D6F5F1;

  --secondary:     #FFD166;   /* เหลืองนวล — ดาว คะแนน เหรียญ */
  --secondary-dark:#C98A00;   /* ใช้เมื่อต้องเป็นตัวอักษรบนพื้นอ่อน */

  --retry:         #D35B5B;   /* "ลองใหม่" — ไม่ใช่ "ผิด" ห้ามใช้คำเชิงลบคู่กับสีนี้ */
  --retry-soft:    #FDE3E3;

  --text:          #3E3A39;   /* ไม่ใช้ดำสนิท — นุ่มตาเด็ก */
  --text-invert:   #FFFFFF;
  --muted:         #756F6C;   /* 4.6:1 บน --bg ผ่าน AA */
  --line:          #EADFD4;

  /* ---------- Color: subjects ---------- */
  --subject-en:      #5B7FE8;  --subject-en-soft:   #E3E9FF;
  --subject-math:    #E0577A;  --subject-math-soft: #FFE1E8;
  --subject-zh:      #D97B26;  --subject-zh-soft:   #FFEBD6;

  /* ---------- Color: buddies ---------- */
  --dino-1:   #7ED9A7;  --dino-2:   #C8F2DC;  --dino-3:   #4DBE8A;
  --cat-1:    #FFB067;  --cat-2:    #FFE3C7;  --cat-3:    #F5904A;
  --duck-1:   #FFD97D;  --duck-2:   #FFF3D2;  --duck-3:   #FF9E4F;
  --dragon-1: #FF8E8E;  --dragon-2: #FFD9D9;  --dragon-3: #FFC24D;

  /* ---------- Typography ---------- */
  --font-display: 'Mali', 'Itim', 'Noto Sans Thai', sans-serif;  /* หัวเรื่อง หัวกลม */
  --font-body:    'Noto Sans Thai', system-ui, sans-serif;
  --font-zh:      'Noto Sans SC', 'Noto Sans Thai', sans-serif;
  --font-num:     'Nunito', system-ui, sans-serif;               /* tabular figures */

  --fs-display: clamp(1.75rem, 6vw, 2.75rem);
  --fs-title:   clamp(1.25rem, 4vw, 1.75rem);
  --fs-body:    1.0625rem;    /* 17px — ใหญ่กว่าเว็บผู้ใหญ่ เด็กอ่านง่ายกว่า */
  --fs-small:   0.9375rem;
  --fs-answer:  clamp(1.25rem, 5vw, 1.75rem);  /* ตัวอักษรในปุ่มตัวเลือก */
  --lh-tight: 1.25;
  --lh-body:  1.65;           /* หลวมกว่าปกติ ช่วยเด็กที่เพิ่งหัดอ่าน */

  /* ---------- Space / Radius / Shadow ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-xl: 36px; --r-pill: 999px;

  --sh-1: 0 2px 6px rgba(133, 96, 70, .10);
  --sh-2: 0 6px 16px rgba(133, 96, 70, .14);
  --sh-3: 0 14px 32px rgba(133, 96, 70, .18);
  --sh-press: inset 0 3px 8px rgba(133, 96, 70, .20);

  /* ---------- Touch targets (เด็กเล็ก) ---------- */
  --tap-min:    56px;   /* ขั้นต่ำทุกปุ่ม */
  --tap-answer: 72px;   /* ปุ่มตัวเลือกคำตอบ */

  /* ---------- Motion ---------- */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 420ms;
}

/* เคารพผู้ใช้ที่ปิดแอนิเมชัน — บังคับทั้งระบบ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- Base ---------- */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
h1, h2, h3, .display { font-family: var(--font-display); line-height: var(--lh-tight); }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.zh  { font-family: var(--font-zh); }

/* ---------- Focus: มองเห็นชัดเสมอ ห้ามลบ ---------- */
:focus-visible {
  outline: 4px solid var(--subject-en);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ---------- ปุ่มตัวเลือกคำตอบ ---------- */
.answer-btn {
  min-height: var(--tap-answer);
  min-width: var(--tap-min);
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-answer);
  color: var(--text);
  background: var(--surface);
  border: 3px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast);
}
.answer-btn:hover  { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--primary-soft); }
.answer-btn:active { transform: translateY(1px);  box-shadow: var(--sh-press); }

.answer-btn.is-correct {
  border-color: var(--accent); background: var(--accent-soft);
  animation: pop var(--dur-slow) var(--ease-spring);
}
.answer-btn.is-retry {
  border-color: var(--retry); background: var(--retry-soft);
  animation: shake 420ms var(--ease-out);
}

/* สถานะต้องไม่สื่อด้วยสีอย่างเดียว — ต้องมีไอคอนกำกับ */
.answer-btn.is-correct::after { content: "✓"; margin-inline-start: var(--sp-2); color: var(--accent); }
.answer-btn.is-retry::after   { content: "↻"; margin-inline-start: var(--sp-2); color: var(--retry); }

@keyframes pop   { 0%{transform:scale(1)} 45%{transform:scale(1.10)} 100%{transform:scale(1)} }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }