/* ============================================================
   theme.css — Design Tokens · Emerald Cream Theme
   ที่มา: Design.md (Single source of truth)
   เด็กทุนมงสอนภาษาญี่ปุ่น — บอสเซนเซ
   ============================================================ */
:root {
  /* --- Surfaces --- */
  --color-bg:            #fffeef;
  --color-bg-alt:        #fdfae0;

  /* --- Text --- */
  --color-ink:           #000000;
  --color-ink-soft:      #4A5550;
  --color-mute:          #8A8F86;

  /* --- Accent --- */
  --color-accent:        #006D40;
  --color-accent-hover:  #005230;

  /* --- Soft fills --- */
  --color-soft-bg:       #E6EFE9;

  /* --- Lines --- */
  --color-border:        #CDD9D1;
  --color-rule:          #D9D4BE;

  /* --- Semantic (ส่วนขยายสำหรับระบบข้อสอบ) --- */
  --color-correct:       #006D40;
  --color-wrong:         #C42B1C;
  --color-wrong-soft:    #FBEAE8;
  --color-gold:          #B89C4A;
  --color-gold-soft:     #FDF8E8;

  /* --- Section colors (3 พาร์ทข้อสอบ) --- */
  --sec-goi:             #006D40;   /* 文字・語彙 */
  --sec-goi-soft:        #E6EFE9;
  --sec-bunpou:          #8C6A1D;   /* 文法 */
  --sec-bunpou-soft:     #F6EFD8;
  --sec-dokkai:          #1A5276;   /* 読解 */
  --sec-dokkai-soft:     #E2EDF4;

  /* --- Type system --- */
  --font-heading-th: "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, -apple-system, sans-serif;
  --font-heading-en: "IBM Plex Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-heading-jp: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;

  --font-body-th:    "Yves Yvesdrawing", "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, sans-serif;
  --font-body-en:    "Iwata Fukumaru Go Asobu", "IBM Plex Sans", system-ui, sans-serif;
  --font-body-jp:    "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;

  /* --- Type scale --- */
  --fs-action:    clamp(22px, 2vw, 36px);
  --fs-h1:        clamp(36px, 4vw, 56px);
  --fs-h2:        clamp(22px, 2.2vw, 28px);
  --fs-body:      clamp(15px, 1.2vw, 18px);
  --fs-kanji-xl:  clamp(80px, 9vw, 160px);
  --fs-meta:      11px;

  --lh-tight:  1.2;
  --lh-body:   1.7;

  /* --- Spacing (8pt grid) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* --- Radius --- */
  --radius-card:   16px;
  --radius-chip:   12px;
  --radius-pill:   999px;

  /* --- Shadows --- */
  --shadow-card:   0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-float:  0 4px 16px rgba(0, 109, 64, 0.08);
  --shadow-pop:    0 12px 40px rgba(0, 109, 64, 0.16);

  /* --- Motion --- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   180ms;
  --dur-med:    320ms;
  --dur-slow:   560ms;
}

/* === Universal Base Reset === */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  background: var(--color-bg);
  color: var(--color-ink-soft);
  font-family: var(--font-body-th);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .action-title {
  color: var(--color-accent);
  font-family: var(--font-heading-th);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-3);
}
.ink-feature { color: var(--color-ink); }
.jp { font-family: var(--font-body-jp); }
a { color: var(--color-accent); }
img { max-width: 100%; }

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