/* ============================================================
   รู้ทันมิจ · Design Tokens
   ------------------------------------------------------------
   ไฟล์นี้คือ "จุดเดียว" สำหรับปรับดีไซน์ทั้งแอป
   เปลี่ยนสี / ฟอนต์ / ระยะ / ความโค้ง ที่นี่ แล้วทุกหน้าเปลี่ยนตาม
   ทุกค่าสีใช้ OKLCH (สม่ำเสมอทางสายตากว่า hex)
   ============================================================ */

:root {
  /* ---------- กระดาษ & หมึก (พื้นครีมอุ่น อมเขียวนิด ๆ) ---------- */
  --color-paper:   oklch(96.5% 0.015 105);  /* พื้นหลักทั้งแอป */
  --color-paper-2: oklch(93.5% 0.022 108);  /* พื้นยกระดับ 1 ขั้น (การ์ด/ปุ่มรอง) */
  --color-paper-3: oklch(90.5% 0.028 110);  /* พื้นยกระดับ 2 ขั้น */
  --color-ink:     oklch(24% 0.02 155);     /* ตัวอักษรหลัก */
  --color-ink-2:   oklch(36% 0.022 155);    /* ตัวอักษรรอง */
  --color-muted:   oklch(43% 0.025 152);    /* ตัวอักษรจาง (คำอธิบายย่อย) */
  --color-rule:    oklch(85% 0.02 130);     /* เส้นแบ่งหลัก */
  --color-rule-2:  oklch(89.5% 0.016 120);  /* เส้นแบ่งรอง */

  /* ---------- เขียว Whoscall — accent หลักหนึ่งเดียว ---------- */
  --color-accent:      oklch(74% 0.2 152);   /* ≈ #0CD25F เขียวสดแบรนด์ */
  --color-accent-deep: oklch(46% 0.12 155);  /* ≈ #077535 เขียวเข้ม ใช้กับตัวอักษร/เส้น */
  --color-accent-soft: oklch(91% 0.07 150);  /* เขียวจางมาก ใช้เป็นพื้นป้าย */
  --color-accent-ink:  oklch(22% 0.05 155);  /* ตัวอักษรบนพื้นเขียวสด */
  --color-focus:       oklch(54% 0.19 152);  /* วงแหวนโฟกัสคีย์บอร์ด */

  /* ---------- สีประจำระดับชั้น (ใช้เป็นจุดเล็ก ๆ เท่านั้น) ---------- */
  --color-lv1:      oklch(83% 0.14 88);    /* ป.1–3 เหลืองแดด */
  --color-lv1-soft: oklch(94% 0.06 92);
  --color-lv1-deep: oklch(42% 0.1 70);
  --color-lv2:      oklch(76% 0.12 235);   /* ป.4–6 ฟ้าว่าว */
  --color-lv2-soft: oklch(93.5% 0.04 235);
  --color-lv2-deep: oklch(41% 0.11 245);
  --color-lv3:      oklch(72% 0.16 45);    /* ม.1–3 ส้มอิฐ */
  --color-lv3-soft: oklch(94% 0.045 55);
  --color-lv3-deep: oklch(43% 0.13 40);
  --color-lv4:      oklch(62% 0.14 300);   /* ม.4–6 ม่วงหมึก */
  --color-lv4-soft: oklch(93.5% 0.04 300);
  --color-lv4-deep: oklch(41% 0.13 300);

  /* ---------- สถานะ ถูก / ผิด ---------- */
  --color-good:      var(--color-accent-deep);
  --color-good-soft: oklch(92% 0.07 150);
  --color-bad:       oklch(46% 0.17 28);
  --color-bad-soft:  oklch(93.5% 0.035 30);

  /* ---------- ฉากหลังไดอะล็อก ---------- */
  --color-scrim: oklch(20% 0.02 150 / 0.45);

  /* ---------- ฟอนต์ (รองรับภาษาไทยทั้งหมด · โหลดจาก Google Fonts) ----------
     display = หัวข้อ/ปุ่มใหญ่ · body = เนื้อความ
     hand = ตัวเขียนมือ ใช้แค่ 2 จุด: บับเบิลมาสคอต + สติกเกอร์ผลคะแนน */
  --font-display: "Mitr", "Sukhumvit Set", "Noto Sans Thai", system-ui, sans-serif;
  --font-body:    "Anuphan", "Sukhumvit Set", "Noto Sans Thai", system-ui, sans-serif;
  --font-hand:    "Mali", "Sukhumvit Set", "Noto Sans Thai", cursive;

  /* ---------- ขนาดตัวอักษร (สเกล 1.25 จากฐาน 16px) ---------- */
  --text-xs:   0.8rem;      /* 12.8px — ใช้เฉพาะป้ายกำกับ ไม่ใช่เนื้อความ */
  --text-sm:   0.9rem;      /* 14.4px */
  --text-base: 1rem;        /* 16px */
  --text-md:   1.15rem;     /* 18.4px — เนื้อความสำหรับเด็กอ่านสบาย */
  --text-lg:   1.4rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.2rem;
  --text-display-s: clamp(1.6rem, 2.4vw + 0.9rem, 2.5rem);
  --text-display:   clamp(2.2rem, 4vw + 1rem, 3.9rem);

  /* ---------- ระยะห่าง (ฐาน 4pt) ---------- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* ---------- ความโค้งมุม ---------- */
  --radius-sm:   8px;    /* ช่องกรอก/ป้ายเล็ก */
  --radius-md:   10px;   /* ปุ่ม */
  --radius-lg:   12px;   /* การ์ด (เพดานของโทน playful) */
  --radius-pill: 999px;  /* ชิป/ป้ายกลม */

  /* ---------- เงา (เบามาก ตามวินัย playful) ---------- */
  --shadow-whisper: 0 1px 2px oklch(20% 0.02 150 / 0.06);
  --shadow-lift:    0 10px 24px -14px oklch(30% 0.06 150 / 0.3);

  /* ---------- จังหวะการเคลื่อนไหว ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* ---------- ชั้นซ้อน ---------- */
  --z-base:   1;
  --z-raised: 10;
  --z-sticky: 200;
  --z-modal:  400;
  --z-toast:  500;

  /* ---------- สีขนมาสคอต "น้องตาไว" ---------- */
  --m-fur:      oklch(88% 0.06 80);   /* ขนครีม */
  --m-fur-dark: oklch(72% 0.09 70);   /* หู/แต้มขน */
  --m-cheek:    oklch(84% 0.08 25);   /* แก้มชมพู */
  --m-muzzle:   oklch(96% 0.02 90);   /* ปากกระบอก */
  --m-shine:    oklch(99% 0.005 90);  /* ประกายตา */
  --m-lens:     oklch(93% 0.03 230 / 0.55); /* เลนส์แว่นขยาย */
}