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

  ที่มา: ผสม Design System "Kinetic Typography" (จาก UI Prompt Library)
  เข้ากับ Brand CI จริงของ Shortcut MBA by eddu
  (ดูตาราง Token Mapping เต็มๆ ได้ในแผนงาน:
   /Users/eddu/.claude/plans/tingly-watching-octopus.md)
  ------------------------------------------------------------
*/

:root {
  /* ===== Brand Primary Colors ===== */
  --color-black: #111111;      /* Primary Black - พื้นหลังมืด, ตัวอักษรบนพื้นเหลือง */
  --color-yellow: #FFDA00;     /* Primary Yellow - พื้นหลังหลัก, accent, highlight */

  /* ===== Brand Accent & Support Colors ===== */
  --color-red: #E63B2E;        /* Accent Red - ใช้กับราคา/CTA เท่านั้น ห้ามใช้เป็น BG หลัก */
  --color-offwhite: #F5F3EB;   /* Off-White - พื้นหลัง infographic, layout สะอาด */
  --color-white: #FFFFFF;      /* White - พื้นหลังทั่วไป, การ์ด */

  /* ===== Kinetic Typography Token Mapping (แปลงเป็นสีแบรนด์จริง) ===== */
  --bg: var(--color-black);              /* เดิม rich black #09090B -> ใช้ Primary Black ของแบรนด์ */
  --fg: var(--color-offwhite);           /* เดิม off-white #FAFAFA -> ใช้ Off-White ของแบรนด์ */
  --accent: var(--color-yellow);         /* เดิม acid yellow #DFE104 -> ใช้ Primary Yellow ของแบรนด์ */
  --accent-fg: var(--color-black);       /* ข้อความบนพื้นเหลือง = ดำเสมอ ตามกฎแบรนด์ */
  --accent-price: var(--color-red);      /* accent ที่ 3 เฉพาะราคา/CTA ซื้อเท่านั้น */

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

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

  --fw-regular: 400;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* ===== 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;           /* เส้นขอบหนา ทึบ ไม่มี shadow */

  /* ===== Gradients (ใช้แบบเบาๆ ตามกฎแบรนด์ "ห้าม gradient ซับซ้อน") ===== */
  --gradient-dark: linear-gradient(180deg, #111111 0%, #1c1c1c 100%);       /* พื้นหลังมืด ให้มีมิติเล็กน้อย */
  --gradient-yellow: linear-gradient(135deg, #FFDA00 0%, #FFEB66 100%);     /* พื้นเหลือง/ปุ่ม CTA ให้มีมิติ */
  --gradient-yellow-glow: radial-gradient(60% 60% at 50% 40%, rgba(255,218,0,0.25) 0%, rgba(255,218,0,0) 100%); /* แสงฟุ้งเบาๆ หลัง headline */
  --gradient-red: linear-gradient(135deg, #E63B2E 0%, #FF6B54 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;
}