/* ============================================================
   PANTOR — base.css
   01 Tokens · 02 Reset/Base

   ไฟล์นี้เป็น "แกนกลาง" ของระบบดีไซน์
   ต้องโหลดก่อน style.css / header.css / footer.css เสมอ
   ห้ามแก้ไขค่าที่นี่โดยไม่ตั้งใจ — มีผลกระทบทั้งเว็บ
   ============================================================ */

/* ── 01 TOKENS ─────────────────────────────────────────── */
:root{
  --brand:#0F5C59;
  --brand-dark:#0A403E;
  --brand-soft:#DDEDEB;
  --white:#FFFFFF;
  --paper:#F7F8F6;
  --ink:#151716;
  --body:#4F5956;
  --muted:#66706C;             /* ← จาก #8C9591 — ผ่าน WCAG AA (4.95:1) */
  --line:#D9DFDD;
  --line-inv:rgba(255,255,255,.22);
  --accent:#C6A66A;

  --font:"DM Sans","Anuphan",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-th:"Anuphan","DM Sans",-apple-system,sans-serif;

  /* Type scale — tuned for reading + UNICEF-like contrast */
  --fs-hero:clamp(2.5rem,5vw,5rem);            /* 40–80px  */
  --fs-section:clamp(1.875rem,3.2vw,3rem);     /* 30–48px  */
  --fs-project:clamp(2.25rem,4vw,4rem);        /* 36–64px  */
  --fs-card:clamp(1.375rem,2vw,1.75rem);       /* 22–28px  */
  --fs-lede:clamp(1.125rem,1.35vw,1.25rem);    /* 18–20px  */
  --fs-body:clamp(1.0625rem,1.1vw,1.125rem);   /* 17–18px  */
  --fs-small:clamp(.9375rem,.95vw,1rem);       /* 15–16px  */
  --fs-nav:.875rem;                             /* 14px     */
  --fs-label:.75rem;                            /* 12px     */

  --gut:clamp(20px,5vw,72px);
  --max:1440px;
  --sec-y:clamp(72px,9vw,132px);
  --hdr-h:68px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ── 02 RESET / BASE ───────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{max-width:100%}
body{
  margin:0;
  background:var(--white);
  color:var(--body);
  font-family:var(--font);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.75;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,dl,dd,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block}
:where(h1,h2,h3){font-weight:600;color:var(--ink);letter-spacing:-.015em}
:lang(th){font-family:var(--font-th)}
section{scroll-margin-top:calc(var(--hdr-h) + 12px)}
::selection{background:var(--brand);color:#fff}

.hero__h1,.sec-h,.about__h,.lead__h,.ct__h,.gf__h,.card__title{
  text-wrap:balance;
}

/* ── LAYOUT PRIMITIVE ──────────────────────────────────── */
/* container กลาง — header, footer, sections ใช้ร่วมกัน */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}