/* ============================================================
   DESIGN TOKENS — ตัวแปรกลางของระบบดีไซน์ทั้งเว็บ
   ============================================================ */
:root {
  /* ---- สี: Classic & Restrained ---- */
  --c-white:     #FFFFFF;
  --c-off-white: #FAF9F7;
  --c-beige:     #EFEAE3;
  --c-sand:      #D8D0C5;
  --c-grey-100:  #E5E5E5;
  --c-grey-300:  #B8B8B8;
  --c-grey-500:  #6E7276;
  --c-graphite:  #2B2E31;
  --c-black:     #0E0F11;
  --c-navy:      #14213D;
  --c-navy-soft: #1E3057;
  --c-accent:    #A6884F;
  --c-danger:    #B3261E;

  /* ---- ฟอนต์ (ค่าเริ่มต้น = EN) ---- */
  --font-body:    'Inter', 'IBM Plex Sans Thai', 'Noto Sans SC', sans-serif;
  --font-display: 'Cormorant Garamond', 'Noto Serif Thai', 'Noto Serif SC', serif;

  /* ---- Type scale ---- */
  --fs-h1:    clamp(2.6rem, 6vw, 5rem);
  --fs-h2:    clamp(2rem, 4vw, 3.25rem);
  --fs-h3:    1.5rem;
  --fs-body:  1.0625rem;
  --fs-small: .875rem;
  --lh-body:  1.75;

  /* ---- Layout ---- */
  --container:   1320px;
  --gutter:      32px;
  --header-h:    84px;
  --section-py:  clamp(96px, 12vw, 200px);   /* v2: เพิ่มช่องว่างให้โปร่งขึ้น */

  /* ---- Spacing 8pt ---- */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 40px;
  --sp-5: 64px; --sp-6: 96px; --sp-7: 128px;

  /* ---- UI ---- */
  --radius:    2px;
  --radius-md: 6px;
  --line-color: rgba(14, 15, 17, .10);
  --line: 1px solid var(--line-color);

  --shadow-1: 0 1px 2px rgba(14,15,17,.04);
  --shadow-2: 0 1px 2px rgba(14,15,17,.04), 0 8px 24px rgba(14,15,17,.06);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-1: .4s;
  --dur-2: .55s;
  --dur-3: .7s;

  /* ---- Z-index (เรียงสูงพอที่จะไม่ถูก element ภายนอกบัง) ---- */
  --z-header: 500;
  --z-menu:   600;
  --z-modal:  700;
}

@media (max-width: 768px) {
  :root { --gutter: 24px; --header-h: 72px; }
}