/*
  SJT Design System — Tokens
  โรงเรียนเซนต์โยเซฟทิพวัล

  สีแบรนด์มาจากสีประจำโรงเรียน "ฟ้า-เหลือง"
  พื้นหลังหลักของเว็บไซต์เป็นสีขาว (ไม่มีโหมดมืด ไม่ปูพื้นสีเทา)
  หน้าแรกแบ่ง section เป็นจังหวะ ขาว → แถบฟ้าอ่อน (.section-tint) → แถบสีเข้ม/รูปเต็มจอ (.section-blue / .section-deep / .video-band) → ขาว
  (ปรับ 22 ต.ค. 2569 ตามตัวอย่าง sertiscorp.com) แบนเนอร์ใช้ไล่เฉดเหลือง/ฟ้าไปขาว (--fade-*) สีสด (primary/secondary) ใช้เป็นจุดเน้นและการ์ดเชิญชวน
*/

:root {
  color-scheme: light;
  /* ---- base surfaces ---- */
  --bg: #FFFFFF;              /* พื้นหลังหน้าเว็บ */
  --surface: #FFFFFF;         /* พื้นหลังการ์ด/กล่องที่ยกขึ้นมา */
  --surface-muted: #FFFFFF;   /* เดิมเป็นเทาอ่อน ตอนนี้เป็นสีขาว: พื้นหลังต้องขาวเสมอ แบ่งส่วนด้วยเส้นขอบ */
  --outline: #DAE1E7;         /* เส้นขอบ, เส้นแบ่ง */
  --outline-strong: #B9C3CB;  /* เส้นขอบเน้น เช่น input :focus state ที่ไม่ใช้สี primary */

  /* ---- text ---- */
  --text: #172936;            /* ตัวอักษรหลัก */
  --text-secondary: #52697A;  /* ตัวอักษรรอง / คำอธิบาย */
  --text-muted: #8F9BA3;      /* ตัวอักษรจาง เช่น timestamp, placeholder */
  --text-on-primary: #FFFFFF; /* ตัวอักษรบนพื้น primary */
  --text-on-secondary: #3A2C04; /* ตัวอักษรบนพื้น secondary (เหลือง สว่าง ต้องใช้ตัวอักษรเข้ม) */

  /* ---- brand ---- */
  --primary: #12A4E2;         /* ฟ้า — ปุ่มหลัก, ลิงก์, นำทาง */
  --primary-hover: #0E86BC;
  --primary-deep: #126391;    /* ข้อความ/ไอคอนบนพื้นอ่อน ที่ต้องการคอนทราสต์สูงกว่า primary ตรง ๆ */
  --primary-pale: #EBF5FA;    /* พื้นหลังอ่อนของ primary เช่น badge, ไอคอนพื้นหลัง */

  --secondary: #F7C41D;       /* เหลือง — ปุ่มรอง, จุดเน้นพิเศษ */
  --secondary-hover: #DDAE14;
  --secondary-deep: #B3820F;  /* ข้อความบนพื้นอ่อนของ secondary */
  --secondary-pale: #FAF5E5;

  /* ---- แถบ section / ไล่เฉดแบนเนอร์ (เพิ่ม 22 ต.ค. 2569) ---- */
  --tint-band: #EAF2FC;       /* พื้นแถบ section สีฟ้าอ่อน (.section-tint) */
  --deep-from: #0B3E60;       /* แถบสีเข้ม/การ์ดไล่เฉดน้ำเงิน เริ่มต้น */
  --deep-to: #1A78AD;         /* แถบสีเข้ม ปลายทาง */
  --fade-yellow-rgb: 250, 238, 160;  /* แบนเนอร์/ภาพประกาศ: เหลืองซีด ไล่ไปขาว (ใช้กับ rgba()) */
  --fade-blue-rgb: 150, 208, 242;    /* แบนเนอร์อันที่เป็นเลขคู่: ฟ้าซีด ไล่ไปขาว */
  --src-facebook: #1877F2;    /* ป้ายบอกที่มาโพสต์ที่ดึงจาก Facebook (.src-badge) */

  /* ---- semantic (แยกจากสีแบรนด์ ห้ามใช้ primary/secondary แทน) ---- */
  --success: #2E8B57;
  --success-bg: #E4F2E9;
  --warning: #B3820F;
  --warning-bg: #FAF1DC;
  --danger: #B3402E;
  --danger-bg: #F6E2DF;

  /* ---- elevation ---- */
  --shadow-sm: 0 1px 2px rgba(23,41,54,0.05);
  --shadow-md: 0 10px 26px -14px rgba(23,41,54,0.18);

  /* ---- radius ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- ปุ่ม: ดีไซน์เดียวทั้งเว็บ (ดู design-system/BUTTONS.md) ---- */
  --btn-bg: #4CA1DC;          /* ฟ้าปุ่ม (ตามแบบที่โรงเรียนกำหนด) */
  --btn-bg-hover: #3A8CC7;
  --btn-fg: #FFFFFF;
  --btn-radius: 999px;        /* ทรงแคปซูล */
  --btn-pad-y: 13px;
  --btn-pad-x: 30px;
  --btn-font: 500 16px/1.35 var(--font-body);
  /* ข้อยกเว้นเดียว: ปุ่ม "ชำระค่าธรรมเนียม" เป็นสีเหลือง */
  --btn-pay-bg: #F7C41D;
  --btn-pay-bg-hover: #DDAE14;
  --btn-pay-fg: #3A2C04;

  /* ---- spacing scale (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* ---- typography ---- */
  --font-body: 'Prompt', 'Noto Sans Thai', sans-serif;
  --font-mono: 'Prompt', 'Noto Sans Thai', sans-serif;

  --text-display: 600 32px/1.35 var(--font-body);
  --text-h1: 600 24px/1.35 var(--font-body);
  --text-h2: 500 18px/1.4 var(--font-body);
  --text-body: 400 15.5px/1.75 var(--font-body);
  --text-caption: 400 12.5px/1.6 var(--font-mono);
}