/* ==========================================================================
   DESIGN TOKENS — โรงเรียนหลังสวนเทศบาลอุปถัมภ์ (ล.ท.)
   แก้สีทั้งเว็บได้จากไฟล์นี้ไฟล์เดียว
   โทนสีดึงจากโลโก้จริง: น้ำเงิน · ฟ้าเทอร์ควอยซ์ · ทอง
   ========================================================================== */
:root {
  /* --- สีแบรนด์ (ดึงจากโลโก้โรงเรียน) ---
     --orange = สีหลักของเว็บ (เดิมเป็นสีส้ม ตอนนี้เป็นน้ำเงินแบรนด์)
     ชื่อตัวแปรคงเดิมไว้เพื่อไม่ให้ต้องแก้ CSS ทั้งไฟล์ */
  --orange:   #1B6FB5;   /* น้ำเงินแบรนด์ — สีหลัก */
  --teal:     #128BA5;   /* ฟ้าเทอร์ควอยซ์ — สีรอง */
  --blue:     #2F7FD4;
  --purple:   #5C6BC0;
  --yellow:   #C9A24B;   /* ทอง — สีเน้น */
  --green:    #1E9E7A;
  --red:      #D9534F;
  --navy:     #072A4D;   /* น้ำเงินเข้มจากโลโก้ */

  /* --- โทนอ่อนของสีแบรนด์ (เปลี่ยนตามโหมด) --- */
  --orange-lt:#E9F2FB;
  --teal-lt:  #E2F4F8;
  --blue-lt:  #EAF1FC;
  --purple-lt:#EDEFF9;
  --yellow-lt:#F8F1DF;
  --green-lt: #E4F5F0;

  /* --- พื้นหลัง / พื้นผิว --- */
  --bg:       #FBFCFE;   /* พื้นหลังหน้าเว็บ */
  --bg2:      #FFFFFF;   /* พื้นหลังรอง */
  --surface:  #FFFFFF;   /* การ์ด แถบนำทาง ฟอร์ม */
  --dark:     #072A4D;   /* สีหัวข้อ (สลับตามโหมด) */
  --footer-bg:#072A4D;   /* พื้นหลังฟุตเตอร์ (เข้มเสมอ) */

  /* --- ตัวอักษร --- */
  --tx:       #0A1B2E;
  --tx2:      #4A5D73;
  --tx3:      #8397AC;
  --border:   #E6EDF5;

  /* --- เงา --- */
  --shadow-sm: 0 4px 16px rgba(0,0,0,0.06);
  --shadow:    0 8px 40px rgba(0,0,0,0.10);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.14);

  /* --- รูปทรง --- */
  --radius:    20px;
  --radius-sm: 12px;

  /* --- ฟอนต์ --- */
  --font-h: 'Syne', 'Noto Sans Thai', sans-serif;
  --font-b: 'Plus Jakarta Sans', 'Noto Sans Thai', sans-serif;
  --font-t: 'Noto Sans Thai', sans-serif;

  /* --- เอฟเฟกต์เฉพาะโหมด --- */
  --hero-blob:  linear-gradient(135deg, #DCEBF8 0%, #EFF6FC 48%, #E2F4F8 100%);
  --img-blob:   linear-gradient(135deg, #CFE4F5, #B9D9F0);
  --img-bright: 1;
  --overlay:    rgba(0,0,0,0.55);
}

/* ==========================================================================
   NIGHT MODE — โหมดกลางคืน
   ========================================================================== */
html[data-theme="dark"] {
  --orange:   #4E9EE0;   /* น้ำเงินสว่างขึ้นให้อ่านออกบนพื้นมืด */
  --teal:     #3FB6CE;
  --yellow:   #E0BC6B;
  --orange-lt:#132B42;
  --teal-lt:  #102E38;
  --blue-lt:  #14243C;
  --purple-lt:#1C2140;
  --yellow-lt:#33290D;
  --green-lt: #102C25;

  --bg:       #08111C;
  --bg2:      #0E1926;
  --surface:  #142334;
  --dark:     #EEF4FA;
  --footer-bg:#04101C;

  --tx:       #E9F0F8;
  --tx2:      #A3B4C8;
  --tx3:      #74879C;
  --border:   #22344A;

  --shadow-sm: 0 4px 16px rgba(0,0,0,0.35);
  --shadow:    0 8px 40px rgba(0,0,0,0.45);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.55);

  --hero-blob:  linear-gradient(135deg, #12263C 0%, #0E1F33 50%, #102E38 100%);
  --img-blob:   linear-gradient(135deg, #1B334C, #16283D);
  --img-bright: .88;
  --overlay:    rgba(0,0,0,0.72);
}

/* สลับโหมดให้ลื่น แต่ปิดไว้ตอนโหลดครั้งแรกกันภาพกระพริบ */
html.theme-ready body,
html.theme-ready body * {
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}