/* theme.css — โทเค็นสี/ฟอนต์กลางของหน้าฝั่งผู้ใช้ (index/hrproject/userinfo/document/eaip-system/eaip-public/idcard/fitness)
   ธีมปัจจุบัน: "Glass Aurora" — กระจกฝ้าบนพื้นสีฟุ้ง ฟ้า–ม่วง–พีช–ทอง (ออกแบบจากม็อคอัพ A ใน /mockups)
   ชื่อตัวแปรเดิมคงไว้ทั้งหมด (--navy, --navy-solid, --gold, --surface, --gray-1..3, --text ฯลฯ) เพื่อไม่ให้โค้ดเก่าพัง — เปลี่ยนแค่ "ค่า"
   ส่วนหน้าตาของคอมโพเนนต์อยู่ใน glass.css (โหลดหลังสไตล์ inline ของแต่ละหน้า)
   หมายเหตุ: admin.html เป็นธีมแยกอีกชุด (ยังไม่ได้ปรับ) ใช้ชื่อตัวแปรเดียวกันแต่ความหมายตรงข้าม
   ต้นฉบับก่อนปรับ: สำรองไว้ที่ C:\hrtrd-chatbot-backup-pre-glass\theme.css */
:root {
  /* --navy = สีตัวอักษร/ไอคอนเน้น, --navy-solid = พื้นทึบของปุ่มหลัก/ไฮไลต์ (คงที่ทุกโหมด) */
  --navy: #1e40af; --navy-mid: #3558e6; --navy-light: #3b82f6;
  --navy-solid: #1d4ed8;
  --violet: #6d4df2;
  --gold: #C8922A; --gold-light: #E8C97A; --gold-pale: #FBF3E2; --gold-pale-text: #7A5010;
  --white: #FFFFFF; --surface: #FFFFFF; --bg: #E8EEFC; --gray-1: #EEF2FB; --gray-2: #D9E0F0; --gray-3: #6B7A96;
  --text: #0F172A; --text-mid: #334155; --text-muted: #4B5870;
  --green: #12A370; --green-pale: #E3F7EF; --green-pale-text: #0A6B49;
  --red: #E5484D; --red-pale: #FFE8E9; --red-pale-text: #A1262B;
  --roommate-bg: #F3F6FF; --roommate-border: #DBE4FF;
  --travel-bg: #FFF7E6; --travel-border: #FFE0A3;
  --font: 'Anuphan', 'Sarabun', system-ui, sans-serif; --heading: 'Anuphan', 'Kanit', 'Sarabun', sans-serif; --mono: 'IBM Plex Mono', monospace;

  /* ── โทเค็นชั้นกระจก (Glass layer) ── */
  --glass: rgba(255,255,255,.58); --glass-strong: rgba(255,255,255,.92); --glass-line: rgba(255,255,255,.95);
  --glass-soft: rgba(255,255,255,.7); --glass-solid: rgba(255,255,255,.76);
  --blur: blur(22px) saturate(160%);
  --sh-glass: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.45), 0 34px 60px -30px rgba(52,64,214,.45), 0 10px 22px -14px rgba(52,64,214,.24);
  --input-bg: #FFFFFF; --input-line: #B7C5E6;
  --scrim: rgba(16,34,90,.42);
  --ease: cubic-bezier(.22,1,.36,1); --spring: cubic-bezier(.3,1.45,.5,1);
  --aurora:
    radial-gradient(540px 460px at 4% -4%, rgba(96,165,250,.8), transparent 70%),
    radial-gradient(520px 480px at 106% 34%, rgba(196,181,253,.88), transparent 70%),
    radial-gradient(540px 460px at 10% 104%, rgba(251,207,232,.88), transparent 70%),
    radial-gradient(420px 380px at 102% 102%, rgba(253,230,138,.7), transparent 70%);
  --water-1: #8FDCFF; --water-2: #2F7DF6;
  /* ชื่อที่ใช้ร่วมกับตัวโหลด/หน้าต่างส่งข้อมูล */
  --ink: var(--text); --mute: var(--text-muted); --line: var(--gray-2); --head: var(--heading);
  --ok: var(--green); --ok-soft: var(--green-pale); --ok-ink: var(--green-pale-text);
}

/* ============ DARK MODE (ตาม prefers-color-scheme ของระบบ/เบราว์เซอร์ผู้ใช้) ============
   --navy เปลี่ยนความหมายเป็น "สีตัวอักษร/ไอคอนเน้น" (ฟ้าอ่อนอ่านง่ายบนพื้นเข้ม) ส่วนพื้นปุ่ม/ไฮไลต์ใช้ --navy-solid ซึ่งคงที่ */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --navy: #A9C3FF; --navy-mid: #3F66E8; --navy-light: #7AA7FF; --navy-solid: #2F5BE0;
    --gold-pale: #3A2F14; --gold-pale-text: #F0D9A8;
    --surface: #18233F; --bg: #0A1020; --gray-1: #1A2540; --gray-2: #2C3A5C; --gray-3: #8A96AD;
    --text: #E8EDF8; --text-mid: #C3CDE3; --text-muted: #93A1C0;
    --green-pale: #0F3D2E; --green-pale-text: #6EE7B7; --red-pale: #401616; --red-pale-text: #FCA5A5;
    --roommate-bg: #16203A; --roommate-border: #2C3F66; --travel-bg: #2A2313; --travel-border: #4A3B1B;
    --glass: rgba(26,36,70,.56); --glass-strong: rgba(24,34,66,.94); --glass-line: rgba(255,255,255,.14);
    --glass-soft: rgba(255,255,255,.08); --glass-solid: rgba(26,36,70,.78);
    --sh-glass: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.04), 0 30px 54px -28px rgba(0,0,0,.8);
    --input-bg: rgba(10,16,34,.72); --input-line: rgba(255,255,255,.18); --scrim: rgba(3,8,22,.62);
    --aurora:
      radial-gradient(540px 460px at 4% -4%, rgba(59,130,246,.38), transparent 70%),
      radial-gradient(520px 480px at 106% 34%, rgba(124,92,255,.4), transparent 70%),
      radial-gradient(540px 460px at 10% 104%, rgba(236,72,153,.2), transparent 70%),
      radial-gradient(420px 380px at 102% 102%, rgba(232,201,122,.14), transparent 70%);
    --water-1: #7FB6FF; --water-2: #3B6CF0;
  }
}

/* ============ MANUAL OVERRIDE (ปุ่มสลับธีมในแอป — เก็บใน localStorage ผ่าน theme-toggle.js) ============ */
html[data-theme="dark"] {
  --navy: #A9C3FF; --navy-mid: #3F66E8; --navy-light: #7AA7FF; --navy-solid: #2F5BE0;
  --gold-pale: #3A2F14; --gold-pale-text: #F0D9A8;
  --surface: #18233F; --bg: #0A1020; --gray-1: #1A2540; --gray-2: #2C3A5C; --gray-3: #8A96AD;
  --text: #E8EDF8; --text-mid: #C3CDE3; --text-muted: #93A1C0;
  --green-pale: #0F3D2E; --green-pale-text: #6EE7B7; --red-pale: #401616; --red-pale-text: #FCA5A5;
  --roommate-bg: #16203A; --roommate-border: #2C3F66; --travel-bg: #2A2313; --travel-border: #4A3B1B;
  --glass: rgba(26,36,70,.56); --glass-strong: rgba(24,34,66,.94); --glass-line: rgba(255,255,255,.14);
  --glass-soft: rgba(255,255,255,.08); --glass-solid: rgba(26,36,70,.78);
  --sh-glass: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.04), 0 30px 54px -28px rgba(0,0,0,.8);
  --input-bg: rgba(10,16,34,.72); --input-line: rgba(255,255,255,.18); --scrim: rgba(3,8,22,.62);
  --aurora:
    radial-gradient(540px 460px at 4% -4%, rgba(59,130,246,.38), transparent 70%),
    radial-gradient(520px 480px at 106% 34%, rgba(124,92,255,.4), transparent 70%),
    radial-gradient(540px 460px at 10% 104%, rgba(236,72,153,.2), transparent 70%),
    radial-gradient(420px 380px at 102% 102%, rgba(232,201,122,.14), transparent 70%);
  --water-1: #7FB6FF; --water-2: #3B6CF0;
}
html[data-theme="light"] {
  --navy: #1e40af; --navy-mid: #3558e6; --navy-light: #3b82f6; --navy-solid: #1d4ed8;
  --gold-pale: #FBF3E2; --gold-pale-text: #7A5010;
  --surface: #FFFFFF; --bg: #E8EEFC; --gray-1: #EEF2FB; --gray-2: #D9E0F0; --gray-3: #6B7A96;
  --text: #0F172A; --text-mid: #334155; --text-muted: #4B5870;
  --green-pale: #E3F7EF; --green-pale-text: #0A6B49; --red-pale: #FFE8E9; --red-pale-text: #A1262B;
  --roommate-bg: #F3F6FF; --roommate-border: #DBE4FF; --travel-bg: #FFF7E6; --travel-border: #FFE0A3;
  --glass: rgba(255,255,255,.58); --glass-strong: rgba(255,255,255,.92); --glass-line: rgba(255,255,255,.95);
  --glass-soft: rgba(255,255,255,.7); --glass-solid: rgba(255,255,255,.76);
  --sh-glass: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.45), 0 34px 60px -30px rgba(52,64,214,.45), 0 10px 22px -14px rgba(52,64,214,.24);
  --input-bg: #FFFFFF; --input-line: #B7C5E6; --scrim: rgba(16,34,90,.42);
  --aurora:
    radial-gradient(540px 460px at 4% -4%, rgba(96,165,250,.8), transparent 70%),
    radial-gradient(520px 480px at 106% 34%, rgba(196,181,253,.88), transparent 70%),
    radial-gradient(540px 460px at 10% 104%, rgba(251,207,232,.88), transparent 70%),
    radial-gradient(420px 380px at 102% 102%, rgba(253,230,138,.7), transparent 70%);
  --water-1: #8FDCFF; --water-2: #2F7DF6;
}