@charset "UTF-8";
/*
  tokens.css
  ------------------------------------------------------------
  ไฟล์นี้เก็บ "ตัวแปรสี/ฟอนต์/ระยะห่าง" ทั้งหมดของเว็บไว้ที่เดียว
  ถ้าอยากเปลี่ยนสีแบรนด์ทีหลัง ให้แก้ที่ไฟล์นี้ไฟล์เดียว
  ไม่ต้องไปไล่แก้ทีละที่ในไฟล์ styles.css

  ที่มา: ผสม Design System "Kinetic Typography" (จาก UI Prompt Library)
  เข้ากับ Brand CI ของ eddu (ม่วงเข้ม / เหลืองมะนาว / ชมพูบานเย็น)
  อ้างอิงจาก key visual ของ eddu.org — พื้นม่วงเข้มเกือบดำ, หัวเรื่องชมพูบานเย็น,
  จุดเน้นและแถบล่างสีเหลืองมะนาว (ตัวหนังสือเข้มบนเหลือง), การ์ดสีครีม,
  ไอคอน 3 มิติโทนส้มปะการัง / เหลืองอำพัน / ม่วงสด

  *** ชื่อตัวแปรเปลี่ยนจากชุดเดิมแล้ว ***
  ชุดเดิมของ Shortcut AI ใช้ชื่อ --color-cyan / --color-red / --color-foundation
  ซึ่งกลายเป็นชื่อที่โกหกเมื่อสีเปลี่ยนเป็นเหลือง/ชมพู จึงเปลี่ยนชื่อให้ตรงกับสีจริง
  ถ้าเห็นชื่อเก่าในโค้ดที่ไหน แปลว่าจุดนั้นตกหล่น ต้องตามแก้
  ------------------------------------------------------------
*/

:root {
  /* ============================================================
     ชั้นที่ 1 — สี CI ดิบของ eddu (ค่าจริงอยู่ที่นี่ที่เดียว)
     อยากปรับโทนแบรนด์ทั้งเว็บ ให้แก้ 9 บรรทัดนี้พอ
     ============================================================ */
  --ci-purple-deep: #170C2E;   /* ม่วงเข้มเกือบดำ — พื้นหลังหลัก/ตัวหนังสือบนพื้นสว่าง */
  --ci-purple-mid: #2A1552;    /* ม่วงกลาง — ปลายไล่เฉดของพื้นหลังมืด ให้มีมิติ */
  --ci-lime: #D4F24C;          /* เหลืองมะนาว — สีเน้นหลัก (แถบ/ไฮไลต์/ตัวเลข) */
  --ci-magenta: #E11D74;       /* ชมพูบานเย็น — ราคา/ปุ่มซื้อ/ตัวกระตุ้น */
  --ci-magenta-soft: #FF74AC;  /* ชมพูอ่อน — ใช้เป็น "ตัวหนังสือ" บนพื้นม่วงเข้ม */
  --ci-violet: #6D28D9;        /* ม่วงสด — eyebrow/ไอคอน บนพื้นสว่าง */
  --ci-coral: #FF6B3D;         /* ส้มปะการัง — สีสนับสนุน */
  --ci-amber: #FFB020;         /* เหลืองอำพัน — สีสนับสนุน (ดาวรีวิว) */
  --ci-cream: #F7F2E8;         /* ครีม — พื้นหลังสลับ/การ์ด */

  /* ============================================================
     ชั้นที่ 2 — ชื่อที่โค้ดจริงเรียกใช้ (ชี้กลับไปชั้นที่ 1)
     ============================================================ */
  --color-black: var(--ci-purple-deep);   /* "ดำ" ของเว็บนี้ = ม่วงเข้มเกือบดำ */
  --color-lime: var(--ci-lime);           /* สีเน้นหลัก — ใช้บนพื้นมืดเสมอ */
  --color-magenta: var(--ci-magenta);     /* ราคา/CTA — ใช้บนพื้นสว่าง หรือเป็นพื้นปุ่ม */
  --color-violet: var(--ci-violet);       /* eyebrow/ไอคอน บนพื้นสว่าง */
  --color-offwhite: var(--ci-cream);      /* ครีม */
  --color-white: #FFFFFF;

  /* เวอร์ชันปรับความสว่าง ไว้กันปัญหา "อ่านไม่ออก"
     กฎง่ายๆ: บนพื้นมืดใช้ตัวที่สว่างขึ้น / บนพื้นสว่างใช้ตัวที่เข้มขึ้น */
  --color-magenta-on-dark: var(--ci-magenta-soft);  /* ชมพูสดจมไปกับพื้นม่วง ต้องใช้ตัวอ่อนกว่า */
  --color-magenta-ink: #B3145C;                     /* ชมพูเข้ม — ตัวหนังสือเล็กบนพื้นขาว/ครีม */

  /* muted / border: สร้าง depth โดยไม่เพิ่มสีนอกชุดที่อนุมัติ */
  --muted-on-light: rgba(23, 12, 46, 0.08);      /* ใช้บนพื้นสว่าง (ขาว/ครีม) */
  --muted-on-dark: rgba(247, 242, 232, 0.12);    /* ใช้บนพื้นมืด (ม่วงเข้ม) */
  --border-on-light: rgba(23, 12, 46, 0.4);      /* เส้นขอบบนพื้นสว่าง */
  --border-on-dark: rgba(247, 242, 232, 0.4);    /* เส้นขอบบนพื้นมืด */

  /* ===== Typography ===== */
  --font-th: "IBM Plex Sans Thai", sans-serif;   /* ฟอนต์ไทยหลัก */
  --font-en: "IBM Plex Sans", sans-serif;        /* ฟอนต์อังกฤษหลัก */

  /* หมายเหตุ: IBM Plex Sans / Sans Thai มีน้ำหนักสูงสุดแค่ 700
     ถ้าใส่ 800/900 เบราว์เซอร์จะ "ปลอม" ตัวหนาให้ (synthetic bold) ซึ่งดูเบลอ
     จึง map ทั้ง extrabold และ black ไว้ที่ 700 */
  --fw-regular: 400;
  --fw-bold: 700;
  --fw-extrabold: 700;
  --fw-black: 700;

  /* ===== Fluid Type Scale (clamp = ปรับขนาดตามหน้าจออัตโนมัติ) ===== */
  --fs-hero: clamp(2.5rem, 10vw, 8rem);          /* Headline hero - ใหญ่สุดในหน้า */
  --fs-price: clamp(3rem, 8vw, 6rem);            /* ตัวเลขราคา/countdown */
  --fs-h2: clamp(2rem, 5vw, 4rem);               /* หัวข้อ section ทั่วไป (40-64px) */
  --fs-h3: clamp(1.5rem, 3vw, 2.25rem);          /* หัวข้อย่อย */
  --fs-body: 1rem;                               /* เนื้อความปกติ */
  --fs-caption: 0.875rem;                        /* ตัวอักษรเล็ก/caption */

  /* ===== Geometry: Rounded (ปรับตามฟีดแบ็กลูกค้า — ให้มีมุมโค้งตามความเหมาะสม) ===== */
  --radius-lg: 20px;             /* การ์ด, กล่องใหญ่ (curriculum, bonus, testimonial, video frame) */
  --radius-md: 12px;             /* ปุ่ม, tab, กล่องเล็ก */
  --radius-sm: 8px;              /* badge, countdown unit, input */
  --radius-pill: 999px;          /* ป้าย/badge ทรงแคปซูล (เช่น ดาวรีวิว, eyebrow tag) */
  --border-width: 2px;           /* เส้นขอบหนา — เหลือไว้ใช้กับปุ่ม/ป้ายที่ต้องคมจริงๆ */

  /* ===== Soft UI — ภาษาการออกแบบใหม่ =====
     เดิมทุกการ์ดใช้ "กรอบดำหนา 2px ไม่มีเงา" ซึ่งเป็นสไตล์ neo-brutalist
     รอบนี้เปลี่ยนเป็น "เส้นบางจาง + เงานุ่ม" ให้ดู minimal และทันสมัยขึ้น
     กรอบหนายังเหลือไว้เฉพาะปุ่มกับป้าย ที่ต้องการความคม */
  --border-hairline: rgba(23, 12, 46, 0.10);         /* เส้นการ์ดบนพื้นสว่าง */
  --border-hairline-dark: rgba(247, 242, 232, 0.14); /* เส้นการ์ดบนพื้นมืด */
  --shadow-sm: 0 1px 2px rgba(23, 12, 46, 0.06), 0 2px 8px rgba(23, 12, 46, 0.05);
  --shadow-md: 0 2px 4px rgba(23, 12, 46, 0.05), 0 8px 24px rgba(23, 12, 46, 0.09);
  --shadow-lg: 0 4px 8px rgba(23, 12, 46, 0.06), 0 20px 48px rgba(23, 12, 46, 0.13);
  /* เงาสีชมพูใต้ปุ่มซื้อ ให้ปุ่มดู "ลอย" และเรืองแสงนิดๆ */
  --shadow-magenta: 0 6px 18px rgba(225, 29, 116, 0.30);
  --shadow-magenta-lg: 0 10px 34px rgba(225, 29, 116, 0.38);

  /* ===== Gradients ===== */
  --gradient-dark: linear-gradient(180deg, #170C2E 0%, #2A1552 100%);       /* พื้นหลังมืด ให้มีมิติเล็กน้อย */
  --gradient-lime: linear-gradient(135deg, #D4F24C 0%, #EAFB9B 100%);       /* แถบ/ป้ายสีเหลืองมะนาว */
  --gradient-lime-glow: radial-gradient(60% 60% at 50% 40%, rgba(212,242,76,0.22) 0%, rgba(212,242,76,0) 100%);
  --gradient-magenta: linear-gradient(135deg, #E11D74 0%, #FF5C9E 100%);    /* ปุ่มซื้อ/ตัวเลขราคา */

  /* ===== Hero Glow — แสงฟุ้งหลังหัวเรื่อง อ้างอิง key visual ของ eddu
     พื้นม่วงเข้ม + แสงชมพูมุมบนซ้าย + แสงเหลืองมะนาวมุมบนขวา + ม่วงสดด้านล่าง ===== */
  --gradient-confetti-glow:
    radial-gradient(35% 40% at 15% 20%, rgba(225,29,116,0.26) 0%, rgba(225,29,116,0) 100%),
    radial-gradient(30% 35% at 85% 15%, rgba(212,242,76,0.16) 0%, rgba(212,242,76,0) 100%),
    radial-gradient(45% 50% at 50% 85%, rgba(109,40,217,0.28) 0%, rgba(109,40,217,0) 100%);

  /* ===== Spacing Scale ===== */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;

  /* ===== Motion Timing ===== */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;      /* ใช้กับ hover color-flip */
  --transition-slow: 600ms ease;

  /* ===== Layout ===== */
  --container-max: 1200px;
  --sticky-bar-height: 64px;
}