/* ============================================================
   PEGASUS UNION — Design Tokens
   สกัดจาก reference art ใน assets/img/reference/
   *** ห้ามใส่สี hex ตรงๆ ในไฟล์ section — ใช้ตัวแปรจากที่นี่เท่านั้น ***
   ============================================================ */
:root {
  /* ---------- BRAND (ใช้ร่วมทั้งเว็บ) ---------- */
  --peg-gold:        #E8B55C;
  --peg-gold-deep:   #C9963A;
  --peg-gold-light:  #F7DFA6;
  --peg-white:       #FFFFFF;
  --peg-cream:       #FFF6EC;
  --peg-ink:         #1A1030;   /* ตัวอักษรหลักบนพื้นสว่าง */
  --peg-ink-soft:    #5A4A72;   /* ตัวอักษรรอง */

  /* ---------- PINK ZONE (ฝั่งผู้หญิง) ---------- */
  --pink-primary:    #F72C87;
  --pink-hot:        #FF1F7A;
  --pink-mid:        #FF7FC0;
  --pink-soft:       #FFC2DE;
  --pink-blush:      #FFE9F3;   /* พื้นหลังโซน */
  --pink-lavender:   #C9A7E8;
  --pink-sky:        #BFE3FF;
  --pink-text:       #7A1550;

  /* ---------- BLUE ZONE (ฝั่งผู้ชาย) ---------- */
  --blue-navy:       #0A1A5C;   /* พื้นหลังโซน */
  --blue-navy-deep:  #060F38;
  --blue-royal:      #1B3FA8;
  --blue-ice:        #7FC9F7;
  --blue-pale:       #D8EEFF;
  --blue-silver:     #E8F1FA;
  --blue-text:       #EAF4FF;   /* ตัวอักษรบนพื้นน้ำเงิน */

  /* ---------- SEMANTIC (เปลี่ยนค่าตอน toggle โซน) ---------- */
  --bg:              var(--pink-blush);
  --fg:              var(--peg-ink);
  --accent:          var(--pink-primary);
  --accent-soft:     var(--pink-soft);
  --surface:         rgba(255,255,255,.72);
  --surface-brd:     rgba(255,255,255,.9);
  --live-dot:        #FF3B30;

  /* ---------- GRADIENT ---------- */
  --grad-pink:  linear-gradient(135deg,#FFE9F3 0%,#FFC2DE 40%,#C9A7E8 100%);
  --grad-blue:  linear-gradient(135deg,#060F38 0%,#0A1A5C 45%,#1B3FA8 100%);
  --grad-gold:  linear-gradient(100deg,#C9963A 0%,#F7DFA6 45%,#E8B55C 100%);

  /* ---------- TYPE ---------- */
  --font-display: 'Mitr', system-ui, sans-serif;   /* หัวข้อใหญ่ */
  --font-body:    'Kanit', system-ui, sans-serif;  /* เนื้อความ */
  --fs-hero:  clamp(2.2rem, 9vw, 5rem);
  --fs-h2:    clamp(1.6rem, 5.5vw, 3rem);
  --fs-h3:    clamp(1.15rem, 3.6vw, 1.6rem);
  --fs-body:  clamp(.95rem, 2.6vw, 1.05rem);
  --fs-sm:    clamp(.8rem, 2.2vw, .9rem);

  /* ---------- SPACE / RADIUS / SHADOW ---------- */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-6:1.5rem; --sp-8:2rem; --sp-12:3rem; --sp-16:4rem; --sp-24:6rem;
  --r-sm:10px; --r-md:18px; --r-lg:28px; --r-pill:999px;
  --shadow-sm: 0 2px 10px rgba(122,21,80,.10);
  --shadow-md: 0 10px 34px rgba(122,21,80,.16);
  --shadow-gold: 0 0 0 2px var(--peg-gold-light), 0 8px 30px rgba(201,150,58,.35);
  --glow-pink: 0 0 28px rgba(247,44,135,.45);
  --glow-blue: 0 0 28px rgba(127,201,247,.50);

  --wrap: 1180px;              /* ความกว้างสูงสุดของ container */
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --ease: cubic-bezier(.22,.9,.3,1);
}

/* โซนน้ำเงิน: สลับค่า semantic ทั้งชุด */
[data-zone="blue"] {
  --bg:          var(--blue-navy);
  --fg:          var(--blue-text);
  --accent:      var(--blue-ice);
  --accent-soft: var(--blue-royal);
  --surface:     rgba(23,45,120,.45);
  --surface-brd: rgba(127,201,247,.35);
}

/* ---------- Gold สำหรับ "ตัวอักษร" ----------
   --grad-gold เดิมสว่างเกินไปเมื่อเป็นตัวหนังสือบนพื้นชมพูอ่อน (contrast ~1.8:1 อ่านไม่ออก)
   จึงแยก token สำหรับ text โดยเฉพาะ: โซนชมพูใช้ทองเข้ม, โซนน้ำเงินใช้ทองสว่างตามเดิม */
:root { --grad-gold-text: linear-gradient(100deg,#8A5A12 0%,#B5822A 45%,#8F5F15 100%); }
[data-zone="blue"] { --grad-gold-text: var(--grad-gold); }