/* tokens.css — ตัวแปร CSS ทั้งหมดของเว็บ (สี, ฟอนต์, ขนาด, ระยะห่าง, motion)
 * ที่มา: docs/DESIGN.md ข้อ 1 — แก้ค่าที่นี่ที่เดียว ไฟล์อื่นอ้างผ่าน var() เท่านั้น
 */

:root {
  /* สี */
  --color-bg:            #0C0C0C;  /* พื้นหลังหลัก */
  --color-bg-light:      #FFFFFF;  /* พื้นหลัง section Services */
  --color-text:          #D7E2EA;  /* ตัวอักษรบนพื้นมืด */
  --color-text-dark:     #0C0C0C;  /* ตัวอักษรบนพื้นขาว */
  --color-border:        #D7E2EA;  /* เส้นขอบการ์ด/ปุ่ม ghost */
  --color-rule-dark:     rgba(12, 12, 12, 0.15);  /* เส้นคั่นบนพื้นขาว */
  --color-rule-light:    rgba(215, 226, 234, 0.15); /* เส้นคั่นบนพื้นมืด */
  --color-white:         #FFFFFF;  /* เส้นขาวรอบในของปุ่ม CTA */
  --color-placeholder:   #1A1A1A;  /* พื้นสีเข้มระหว่างรูปโหลด (ไทล์ Marquee / รูปการ์ดผลงาน) */

  /* gradient หัวเรื่อง (ใช้กับ .hero-heading) */
  --grad-heading: linear-gradient(180deg, #646973 0%, #BBCCD7 100%);

  /* gradient ปุ่ม CTA */
  --grad-cta: linear-gradient(123deg, #18011F 7%, #B600A8 37%, #7621B0 72%, #BE4C00 100%);
  --shadow-cta: 0 4px 4px rgba(181, 1, 167, 0.25), 4px 4px 12px #7721B1 inset;

  /* ฟอนต์ */
  --font-main: 'Kanit', system-ui, sans-serif;

  /* สเกลตัวอักษร (fluid ทั้งหมด) */
  --fs-display:   clamp(3rem, 12vw, 160px);   /* หัวเรื่อง section */
  --fs-number:    clamp(3rem, 10vw, 140px);   /* เลข 01-06 */
  --fs-item:      clamp(1rem, 2.2vw, 2.1rem); /* ชื่อรายการ service */
  --fs-lead:      clamp(1rem, 2vw, 1.35rem);  /* ย่อหน้า about */
  --fs-body:      clamp(0.875rem, 1.6vw, 1.25rem); /* ต่ำสุด 14px */
  --fs-micro:     clamp(0.875rem, 1.4vw, 1.5rem);  /* ต่ำสุด 14px */

  /* ระยะห่าง */
  --space-1: 0.75rem;
  --space-2: 1.25rem;
  --space-3: 2rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 8rem;

  /* ความโค้ง */
  --radius-tile: 1rem;      /* รูปใน marquee */
  --radius-card: 40px;      /* การ์ด (รูปในการ์ดผลงานใช้ --radius-box) (sm 50px, md 60px) */
  --radius-box: 24px;       /* การ์ดราคา / กล่องขนาดกลาง */
  --radius-pill: 999px;

  /* จังหวะ motion */
  --ease-soft: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-fade: 0.7s;
  --dur-hover: 0.2s;
}

/* --radius-card เปลี่ยนตามจอ: 40px → sm 50px → md 60px (Services / Projects ใช้ตัวเดียวกัน) */
@media (min-width: 640px) {
  :root {
    --radius-card: 50px;
  }
}

@media (min-width: 768px) {
  :root {
    --radius-card: 60px;
  }
}