/* ══ tokens ══════════════════════════════════════════════
   ตัวแปรทั้งเว็บอยู่ไฟล์นี้ไฟล์เดียว
   แก้สี / ฟอนต์ / ขนาด / ระยะ → แก้ที่นี่ที่เดียวพอ
   ═══════════════════════════════════════════════════════ */
:root{
  /* ── สี ── */
  --paper:#F1F6EC;      /* พื้นหลัง */
  --card:#FFFFFF;       /* พื้นการ์ด */
  --ink:#0E2417;        /* ตัวหนังสือหลัก */
  --ink-2:#4E675A;      /* ตัวหนังสือรอง */
  --ink-3:#7C9587;      /* ตัวหนังสือจาง */
  --line:#D6E4CE;       /* เส้นขอบ */

  --green:#0FA958;      /* สีหลัก = แกน Y ของ viewport */
  --green-dk:#0A7A3F;
  --green-lt:#E4F3DC;

  --ax-x:#FF5A47;       /* แกน X */
  --ax-z:#3D7BFF;       /* แกน Z */
  --amber:#FFB020;

  /* ── ฟอนต์ ── */
  --mono:"IBM Plex Mono",ui-monospace,monospace;   /* ตัวเลข + อังกฤษล้วน */
  --disp:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Anuphan",system-ui,sans-serif;           /* ไทยใช้ตัวนี้เสมอ */

  /* ── ขนาดตัวอักษร ── */
  --fs-2:.72rem;
  --fs-1:.84rem;
  --fs0:.95rem;
  --fs1:1.0625rem;
  --fs2:1.2rem;
  --fs3:1.42rem;
  --fs4:clamp(1.9rem, 3.4vw, 2.6rem);
  --fs5:clamp(2.4rem, 4.8vw, 4rem);

  /* ── ระยะ ── */
  --s0:.5rem;
  --s1:.85rem;
  --s2:1.35rem;
  --s3:2rem;
  --s4:3.25rem;
  --s5:5.5rem;

  /* ── อื่นๆ ── */
  --r:14px;
  --shadow:0 1px 2px rgba(14,36,23,.05), 0 12px 32px -16px rgba(14,36,23,.24);

  /* เวที 3D — เทาสว่างไล่เฉด ให้ชิ้นงานมีมิติแต่ยังเข้าธีมสว่าง */
  --stage-bg:
    radial-gradient(108% 80% at 50% 24%, #FFFFFF 0%, #EDF2E8 44%, #DCE6D4 78%, #CFDCC6 100%);
}