/* ============================================================
   CORE — Design Tokens
   BMA LearningHub v2 — Premium Light theme
   คงพาเลตสี BMA เดิม + ฟอนต์เดิม + radius/shadow ใหม่
   ============================================================ */

:root {
  /* === BRAND COLORS (BMA palette เดิม) === */
  --primary:          #00744b;
  --primary-dark:     #205a41;
  --primary-light:    #00a86b;
  --primary-50:       #e6f3ee;
  --primary-100:      #c3e2d3;

  --secondary-blue:   #0071ce;
  --secondary-yellow: #f8df52;
  --accent:           #67a33b;
  --teal:             #00c08b;
  --orange:           #ffb449;
  --pink:             #ec3faa;
  --purple:           #480086;
  --policy-blue:      #00339f;

  /* === NEUTRAL / TEXT === */
  --text:             #1c2b24;
  --text-strong:      #0f1a15;
  --text-muted:       #5d6b65;
  --text-light:       #9aa6a1;

  /* === SURFACES === */
  --surface:          #ffffff;
  --surface-alt:      #f5f9f6;
  --surface-2:        #eef4f0;
  --surface-tint:     #fafdfb;

  /* === LINES === */
  --line:             rgba(0, 116, 75, 0.12);
  --line-strong:      rgba(0, 116, 75, 0.22);

  /* === RADIUS === */
  --radius-sm:        10px;
  --radius:           14px;
  --radius-lg:        18px;
  --radius-xl:        22px;
  --radius-pill:      999px;

  /* === SHADOWS === */
  --shadow-sm:        0 2px 6px rgba(0, 116, 75, 0.06);
  --shadow:           0 6px 18px rgba(0, 116, 75, 0.08);
  --shadow-lg:        0 14px 40px rgba(0, 116, 75, 0.12);
  --shadow-primary:   0 8px 24px rgba(0, 116, 75, 0.25);

  /* === GRADIENTS === */
  --gradient-primary:   linear-gradient(135deg, #00a86b 0%, #00744b 60%, #205a41 100%);
  --gradient-hero-bg:
    radial-gradient(ellipse at 18% 35%, rgba(0, 168, 107, 0.22), transparent 55%),
    radial-gradient(ellipse at 85% 75%, rgba(103, 163, 59, 0.15), transparent 55%),
    radial-gradient(ellipse at 60% 10%, rgba(248, 223, 82, 0.18), transparent 50%);
  --gradient-soft:      linear-gradient(180deg, #fdfefb 0%, #f2f8f4 100%);
  --gradient-accent:    linear-gradient(135deg, #f8df52 0%, #ffb449 100%);

  /* === LAYOUT === */
  --header-h:         72px;
  --container:        1320px;
  --gutter:           24px;

  /* === FONTS === */
  /* [2026-07-06] body เปลี่ยนจาก "TH Sarabun New" → Anuphan
     เหตุผล: x-height ของ TH Sarabun ≈0.34 vs Anuphan ≈0.52 → ที่ px เท่ากัน Sarabun ดูเล็กกว่า ~35-50%
     ตรงกับ design system ใน CLAUDE.md (body=Anuphan) และแก้ปัญหา "ตัวอักษรเล็ก" ที่ต้นเหตุ */
  --font-body:    "Anuphan", "Noto Sans Thai", system-ui, sans-serif;
  --font-heading: "Anuphan", "Helvetica Neue", system-ui, sans-serif;
  --font-display: "Sao Chingcha", "Anuphan", serif;

  /* === TYPE SCALE (single source of truth — ดู docs/TYPOGRAPHY_PLAN.md) ===
     [2026-07-06] ทำใหม่เป็น responsive clamp(min, fluid, max) ทุกระดับ (เดิม body เป็น pt คงที่ ไม่ scale)
     body = 20px (mobile) → 22px (desktop) · Anuphan · เน้น "ใหญ่ + เท่ากัน + สบายตา" */
  --fs-display:  clamp(34px, 4.5vw + 1rem, 56px);   /* h1 / hero */
  --fs-h2:       clamp(27px, 2.6vw + 1rem, 40px);   /* section ใหญ่ */
  --fs-h3:       clamp(22px, 1.4vw + 1rem, 29px);   /* หัวข้อ section */
  --fs-h4:       clamp(19px, 0.6vw + 1.05rem, 23px);/* ชื่อการ์ด / หัวกล่อง */
  --fs-eyebrow:  clamp(14px, 0.2vw + 0.8rem, 16px); /* kicker / ป้ายหมวด UPPER */
  --fs-lead:     clamp(21px, 0.6vw + 1.1rem, 24px); /* คำโปรยนำ / subtitle */
  --fs-body:     clamp(20px, 0.4vw + 1.1rem, 22px); /* เนื้อหาหลัก (default p) */
  --fs-body-sm:  clamp(17px, 0.3vw + 0.95rem, 19px);/* คำอธิบายรอง */
  --fs-meta:     clamp(15px, 0.2vw + 0.9rem, 16px); /* วันที่ / ผู้เขียน / เมนู */
  --fs-badge:    14px;                              /* tag / chip (คงที่ ไม่ scale) */
  --fs-micro:    13px;                              /* footnote */

  /* === LINE-HEIGHT (สบายตา) === */
  --lh-tight:    1.15;   /* display / h1 / h2 */
  --lh-heading:  1.3;    /* h3 / h4 */
  --lh-base:     1.6;    /* default */
  --lh-body:     1.8;    /* ย่อหน้าเนื้อหา / reading */
  --lh-snug:     1.45;   /* meta / label / ui */

  /* === TRANSITIONS === */
  --trans-fast:   all .15s ease;
  --trans:        all .25s cubic-bezier(.4,0,.2,1);
}