/* ==============================================================
   MONZONE — VARIABLES (design tokens)
   ค่าสี HEX/rgb เขียนได้ที่ไฟล์นี้เท่านั้น (R-06) · ไฟล์อื่นใช้ var(--…)
   ลำดับโหลด: variables → global → components → pages/<หน้า>.css
   ============================================================== */

/* ==============================================================
   MONZONE — HOME TOKENS
   ⚠️ ไฟล์เดียวที่อนุญาตให้เขียนค่าสีตรง ๆ  ที่อื่นใช้ var() เท่านั้น
   ⚠️ ขนาดฟอนต์/line-height เป็น "เลขคู่" ทั้งหมด — ห้าม clamp ห้ามทศนิยม
   ============================================================== */
:root{
  /* ---------- Surface ---------- */
  --bg:            #FFFFFF;
  --bg-alt:        #F4F5F6;
  --bg-dark:       #11161A;   /* surface/dark */
  --bg-deep:       #030405;   /* ฉากหลัง hero — เข้มกว่า surface/dark */
  --bg-dark-alt:   #06283A;
  --placeholder:   #CDD2D7;   /* placeholder/image */

  /* ---------- Text ---------- */
  --ink:           #11161A;
  --ink-muted:     #9AA3AB;
  --ink-body:      #4D565F;
  --ink-label:     #8A939B;
  --ink-on-dark:   #FFFFFF;
  --ink-on-dark-muted: rgba(255,255,255,.62);

  /* ---------- Brand ---------- */
  --accent:        #D4101B;   /* brand/accent — ปุ่มหลัก */
  --accent-hover:  #B00E16;
  --accent-active: #8A0A11;
  --accent-soft:   #FFF1F1;
  --brand-logo:    #EC1B24;   /* โลโก้เท่านั้น */
  --amber:         #FFCC00;   /* brand/amber */
  --on-amber:      #11161A;   /* ตัวอักษรบนเหลือง: ดำเท่านั้น */
  --tint-award:    rgba(255,204,0,.13);   /* แถบไฮไลต์รางวัลเด่น */

  /* ---------- Line / Blueprint ---------- */
  --line:          #DDE1E5;
  --line-dark:     rgba(255,255,255,.15);
  --focus:         #FFC2C4;

  /* ---------- Scrim / overlay ---------- */
  --scrim-down:  linear-gradient(to bottom, rgba(17,22,26,.20), rgba(17,22,26,.92));
  /* จุดพับตามตำแหน่งจริงของคอลัมน์ข้อความ (เริ่ม 32.9% จบ 92.8%)
     ซ้าย 0-24% = ภาพล้วน เปิดให้เห็นชัด · 24-33% = ช่วงไล่เฟด · 33%+ = ทึบพอให้อ่านข้อความ */
  /* ม่านต้องทึบสนิท "ก่อน" ถึงคอลัมน์ข้อความ ไม่ใช่ค่อย ๆ ทึบไปจนถึง 72%
     ของเดิมค้างที่ .86-.96 ยาวตั้งแต่ 33% ถึง 72% ลายถนนกับเส้นเหลืองเลยทะลุ
     มาอยู่ใต้ตัวอักษรตลอด อ่านแล้วรู้สึกข้อความไปเบียดขอบเกรเดียน
     ตัดหางนั้นทิ้ง ทึบ 100% ตั้งแต่ 30% — เสียพื้นที่ภาพที่เห็นจริงแค่ ~40px */
  /* ส่วน Why: เฟดยาวแบบ ease-in-out (smoothstep) จาก 8% → ทึบเต็มที่ 33%
     เดิมไล่จาก 0 → ทึบภายในแค่ 8% ของความกว้าง เลยเห็นเป็นกำแพงดำตัดขอบ ไม่ใช่เฟด
     ข้อความเริ่มที่ 32.6% (จอ 1024) ถึง 40% (จอ 2560) — ตรงนั้นทึบ ~100% ทุกขนาดจอ */
  --scrim-right: linear-gradient(to right, rgba(17,22,26,0) 0%, rgba(17,22,26,0) 8%, rgba(17,22,26,0.04) 11.1%, rgba(17,22,26,0.16) 14.2%, rgba(17,22,26,0.32) 17.4%, rgba(17,22,26,0.5) 20.5%, rgba(17,22,26,0.68) 23.6%, rgba(17,22,26,0.84) 26.8%, rgba(17,22,26,0.96) 29.9%, rgba(17,22,26,1) 33%);
  --scrim-veil:  linear-gradient(rgba(17,22,26,.84), rgba(17,22,26,.84));
  --scrim-card:  linear-gradient(to bottom, rgba(17,22,26,1) 37%, rgba(17,22,26,.72) 52%, rgba(17,22,26,0) 100%);
  --scrim-card-x: linear-gradient(to right, rgba(17,22,26,1) 42%, rgba(17,22,26,.78) 62%, rgba(17,22,26,0) 96%);
  --fade-deep-down: linear-gradient(to bottom, rgba(3,4,5,0) 0%, rgba(3,4,5,.92) 71%, rgba(3,4,5,1) 100%);
  /* แบบทึบสนิทก่อนถึงขอบ — ใช้กับขอบบน/ล่างของ section ที่มีภาพพื้นหลัง
     ตัวบนไล่ถึงทึบ 100% ที่พิกเซลสุดท้ายพอดี เนื้อภาพเลยยังโผล่จาง ๆ ติดขอบ
     แล้วไปชนกับพื้นทึบของ section ถัดไป กลายเป็นเส้นคั่นบาง ๆ ให้เห็น */
  --fade-deep-solid: linear-gradient(to bottom, rgba(3,4,5,0) 0%, rgba(3,4,5,.96) 58%, rgba(3,4,5,1) 78%);
  --fade-deep-left: linear-gradient(to left, rgba(3,4,5,0) 0%, rgba(3,4,5,0) 52%, rgba(3,4,5,1) 92%);
  --fade-dark-side: linear-gradient(to right, rgba(17,22,26,0), rgba(17,22,26,1));
  --fade-deep-side: linear-gradient(to right, rgba(3,4,5,0) 0%, rgba(3,4,5,.4) 55%, rgba(3,4,5,1) 100%);   /* ช่วงแรกจางนิดเดียว เข้มจริงแค่ชิดขอบ */
  --wash-contact: linear-gradient(to bottom, rgba(255,204,0,1) 0%, rgba(255,204,0,1) 52%, rgba(146,118,8,.82) 72%, rgba(17,22,26,1) 100%);
  --glass:        rgba(255,255,255,.24);
  --glass-light:  rgba(255,255,255,.62);   /* แผงฟอร์มติดต่อ — ต้องอ่านออกทั้งบนเหลืองและบนพื้นเข้ม */
  --glass-card:   rgba(179,179,179,.37);
  --glass-line:   rgba(255,255,255,.28);
  --scrim-header: rgba(6,9,12,.72);
  --scrim-header-stuck: rgba(6,9,12,.94);
  --hover-on-dark: rgba(255,255,255,.06);
  --hover-on-dark-strong: rgba(255,255,255,.12);
  --pulse-amber: rgba(255,204,0,.55);
  --pulse-amber-out: rgba(255,204,0,0);
  /* ใช้กับของที่วางบนพื้นเหลือง — ขาวจางมองไม่เห็นบนเหลือง ต้องใช้โทนดำแทน */
  --line-on-amber:  rgba(17,22,26,.20);
  --hover-on-amber: rgba(17,22,26,.08);
  --ink-on-amber-muted: rgba(17,22,26,.64);

  /* เงา — ค่าสีต้องอยู่ในไฟล์นี้เท่านั้น */
  --shadow-pop: 0 16px 48px rgba(17,22,26,.10);

  /* ---------- Shape ---------- */
  --r:       8px;    /* ปุ่ม · อินพุตเล็ก */
  --r-lg:    12px;   /* การ์ด */
  --r-glass: 12px;   /* ช่องกรอกแบบกระจก — เท่าการ์ด (เดิม 20px มนเกินไป) */
  --r-card:  40px;   /* การ์ดเสียงลูกค้า */
  --r-pill:  50%;    /* วงกลมไอคอนเท่านั้น */
  --chamfer: 24px;   /* ลายเซ็นแบรนด์ */

  /* ---------- Spacing (ฐาน 4) ---------- */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --dur-move:420ms;    /* แถวไหลเข้าที่เมื่อเพื่อนกาง/หด */
  --award-row:184px;      /* ช่องแถวที่กางอยู่ */
  --award-row-sm:120px;   /* ช่องแถวย่อ */
  --dur-travel:640ms;  /* ตราเดินทางจากแถวขึ้นเวที */
  /* ease-out ออกตัวเร็วเกินไปจนตาตามไม่ทันว่าแถวไหนย้ายไปไหน
     ตัวนี้ออกตัวนุ่มกว่าและค่อย ๆ จอด ใช้เฉพาะการเคลื่อนที่ที่ต้องตามด้วยตา */
  --ease-move: cubic-bezier(.4,0,.2,1);

  /* ---------- Layout ---------- */
  --container: 1280px;
  --gutter: 24px;
  --header-h: 72px;

  /* ---------- Motion ---------- */
  --dur-fast:120ms; --dur:200ms; --dur-enter:320ms;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* ---------- Type ---------- */
  --font-display:'Prompt', sans-serif;
  --font-body:   'Prompt', sans-serif;
  --font-mono:   'IBM Plex Mono', monospace;

  /* ขนาด/บรรทัด — เลขคู่ล้วน · ค่าตั้งต้น = mobile */
  --fs-hero:36px;  --lh-hero:48px;
  --fs-h2:28px;    --lh-h2:38px;
  --fs-h3:20px;    --lh-h3:28px;
  --fs-card:20px;  --lh-card:28px;
  --fs-stat:32px;  --lh-stat:40px;
  --fs-lead:16px;  --lh-lead:28px;
  --fs-body:16px;  --lh-body:28px;
  --fs-sm:14px;    --lh-sm:24px;
  --fs-label:12px; --lh-label:20px;
  --fs-mono:12px;  --lh-mono:20px;
  --fs-mono-xs:10px; --lh-mono-xs:16px;
  --fs-display:56px; --lh-display:64px;   /* ตัวอักษรยักษ์หลังภาพ hero */
}

/* ---------- Tablet ---------- */
@media (min-width:768px){
  :root{
    --fs-hero:48px;  --lh-hero:60px;
    --fs-h2:34px;    --lh-h2:46px;
    --fs-h3:22px;    --lh-h3:32px;
    --fs-card:22px;  --lh-card:30px;
    --fs-stat:38px;  --lh-stat:44px;
    --fs-lead:18px;  --lh-lead:32px;
    --fs-display:88px; --lh-display:104px;
  }
}

/* ---------- Desktop — ตรงกับ Figma 1440 ---------- */
@media (min-width:1024px){
  :root{
    --fs-hero:62px;  --lh-hero:76px;
    --fs-h2:40px;    --lh-h2:54px;
    --fs-h3:26px;    --lh-h3:36px;
    --fs-stat:44px;  --lh-stat:48px;
    --fs-display:112px; --lh-display:138px;
  }
}

/* ────────────── base ────────────── */