/* SIGMA Padel Club — Design Tokens (จาก docs/spec.pdf)
   ทุกไฟล์ CSS ต้องใช้ค่าจากไฟล์นี้เท่านั้น ห้าม hardcode */

@font-face {
  font-family: 'Lexend Zetta';
  src: url('../../brand/fonts/lexend-zetta/LexendZetta-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Lexend Zetta';
  src: url('../../brand/fonts/lexend-zetta/LexendZetta-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../../brand/fonts/inter/Inter_18pt-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../../brand/fonts/inter/Inter_24pt-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../../brand/fonts/inter/Inter_18pt-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Kanit';
  src: url('../../brand/fonts/kanit/Kanit-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Kanit';
  src: url('../../brand/fonts/kanit/Kanit-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Kanit';
  src: url('../../brand/fonts/kanit/Kanit-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}

:root {
  /* Colour palette (CI page: COLOUR PALETTE) */
  --color-black:  #0e0e0e;  /* primary — พื้นหลังหลัก */
  --color-rust:   #932a0f;  /* accent — ปุ่ม/CTA/ไฮไลต์ */
  --color-green:  #273826;  /* secondary dark */
  --color-maroon: #450a04;  /* secondary dark */
  --color-cream:  #ead6ba;  /* พื้นสว่าง/ตัวอักษรบนพื้นเข้ม */
  --color-white:  #ffffff;

  /* Semantic */
  --bg-primary:    var(--color-black);
  --bg-surface:    #1a1a1a;          /* 90% ของ black ตามสเกลใน CI */
  --bg-light:      var(--color-cream);
  --text-on-dark:  var(--color-cream);
  --text-on-light: var(--color-black);
  --accent:        var(--color-rust);

  /* Typography (CI page: TYPOGRAPHY) */
  --font-headline: 'Lexend Zetta', sans-serif;  /* หัวข้อ EN, ตัวพิมพ์ใหญ่ */
  --font-body-en:  'Inter', sans-serif;          /* เนื้อหา EN */
  --font-thai:     'Kanit', sans-serif;          /* ภาษาไทยทั้งหมด */

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.5rem;
  --text-hero: clamp(2.5rem, 6vw, 4.5rem);

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

  /* Misc */
  --radius: 4px;              /* แบรนด์เหลี่ยมคม โมเดิร์น — ใช้ radius น้อย */
  --container: 1200px;
  --transition: 0.25s ease;

  /* Tints (derive จาก palette ตามสเกล opacity ใน CI) */
  --cream-60:  color-mix(in srgb, var(--color-cream) 60%, transparent);
  --cream-40:  color-mix(in srgb, var(--color-cream) 40%, transparent);
  --cream-15:  color-mix(in srgb, var(--color-cream) 15%, transparent);
  --black-60:  color-mix(in srgb, var(--color-black) 60%, transparent);
  --black-15:  color-mix(in srgb, var(--color-black) 15%, transparent);
  --cream-soft: color-mix(in srgb, var(--color-cream) 92%, var(--color-white));

  /* Logo sizing (approved: design/approved/landing.md ข้อ 2 — override ที่ ≥768px) */
  --logo-h: 48px;
  --logo-h-footer: 40px;
  --header-h: calc(var(--logo-h) + (2 * var(--sp-3)));

  /* === Sport Punch additions (approved doc ข้อ 8.6) === */
  /* Typography scale เพิ่ม */
  --text-hero-xl: clamp(3rem, 9vw, 6.5rem);   /* final CTA headline (hero แยกใช้ --text-slogan ตาม 8.9) */
  /* 8.9 Hero Fit: hero slogan เท่านั้น — max 3rem = ค่า final ที่ designer เคาะ
     (วัดจาก font metrics จริง: 3.5rem → 6 บรรทัด / 3rem → 4 บรรทัดที่ 1440px ตามเป้าสมดุลกับการ์ดภาพ) */
  --text-slogan:  clamp(2.5rem, 4.5vw, 3rem);
  --text-num:     clamp(3.5rem, 8vw, 6rem);   /* เลข oversized: why-card, ราคา */
  --text-ghost:   clamp(4.5rem, 16vw, 11rem); /* ghost outline text หลัง section head */

  /* Tints เพิ่ม (สำหรับ ghost outline stroke — จางกว่าชุด 15%) */
  --black-08: color-mix(in srgb, var(--color-black) 8%, transparent);
  --cream-08: color-mix(in srgb, var(--color-cream) 8%, transparent);

  /* Geometry */
  --cut:  clamp(24px, 4vw, 56px);  /* ความสูงมุมเฉียงคั่น section */
  --tilt: -2deg;                    /* มุมเอียงมาตรฐาน (marquee, แถบ rust, eyebrow) */

  /* === Colour Enrichment (approved doc ข้อ 8.8 — ทุกตัว derive จาก palette) === */
  --rust-35:     color-mix(in srgb, var(--color-rust) 35%, transparent);   /* glow แรง */
  --rust-20:     color-mix(in srgb, var(--color-rust) 20%, transparent);   /* glow เบา */
  --green-deep:  color-mix(in srgb, var(--color-green) 55%, var(--color-black));  /* เขียวจมดำ */
  --maroon-deep: color-mix(in srgb, var(--color-maroon) 55%, var(--color-black)); /* maroon จมดำ */

  /* Gradient ที่อนุมัติ (ใช้เฉพาะจุดตามตาราง 8.8 — ห้ามใช้จุดอื่น) */
  --grad-cta:   linear-gradient(20deg, var(--color-maroon) 0%, var(--color-rust) 60%);
  --grad-btn:   linear-gradient(180deg, var(--color-rust) 0%, var(--color-maroon) 170%);
  --grad-why:   radial-gradient(120% 80% at 85% 110%, var(--green-deep) 0%, transparent 55%);
  --grad-price: linear-gradient(170deg, var(--green-deep) 0%, var(--color-green) 45%, var(--green-deep) 115%);
  --grad-loc:   radial-gradient(90% 70% at 12% 105%, var(--maroon-deep) 0%, transparent 55%);
}

@media (min-width: 768px) {
  :root {
    --logo-h: 64px;
    --logo-h-footer: 48px;
  }
}