/* ════════════════════════════════════════════════════════════
   AliceLium UI Kit — โทเคน · แหล่งความจริงเดียวของสีทั้งแอป

   ★ กติกาที่ยกมาจาก AliceLium ทั้งชุด ★
   ห้ามมีค่าสี (hex / rgb) อยู่นอกไฟล์นี้ · ห้าม inline style ที่มีสี
   เหตุผลไม่ใช่ความเป็นระเบียบ: วันที่เปลี่ยนธีม ถ้าสีกระจายอยู่ 150 จุด
   จะไล่แก้ไม่ครบและพลาดแน่นอน โดยไม่มี error ที่ไหนฟ้องเลยสักที่

   โครงสามชั้น: primitive → semantic → ชุด r,g,b
   ชั้นที่สามมีไว้เพราะคอมโพเนนต์ต้องคุม "ความจาง" ของสีเดียวกันหลายค่า
   (พื้นจาง โฮเวอร์ วงโฟกัส เส้นขอบ) — แยกสีออกจากความจาง สีอยู่ที่นี่
   ความจางอยู่ตรงที่ใช้: rgba(var(--rgb-primary), .12)

   ⚠️ แก้ hex แล้วต้องแก้ชุด r,g,b ให้ตรงกันเสมอ ⚠️ CSS แปลงให้เองไม่ได้
      ลืมแก้คู่ไหน แอปจะมีสีนั้นสองเฉดปนกันโดยไม่มีอะไรฟ้อง

   ── ค่าคอนทราสต์ทุกตัวในไฟล์นี้วัดมาจริง ไม่ได้เดา ──
   เกณฑ์: ตัวหนังสือปกติ ≥4.5:1 · ไอคอน/ขอบ ≥3:1 (WCAG AA)
   ════════════════════════════════════════════════════════════ */

:root {
  /* ─── 1) Primitives — โหมดสว่าง ────────────────────────────
     ★ ฟ้ามีสองเฉดโดยตั้งใจ ★ #1A73E8 เป็น "สีพื้น" เท่านั้น
     (ขาวบนมัน 4.51:1 ✓) ส่วนตัวหนังสือ/ลิงก์บนพื้นอ่อนต้องใช้ #1765CC (5.2:1 ✓)
     เอา #1A73E8 มาเป็นตัวหนังสือบนพื้นขาวแล้วตก AA — เป็นกับดักที่เจอบ่อยที่สุด */
  --c-blue-500: #1A73E8;   /* fill */
  --c-blue-600: #1765CC;   /* text / link */
  --c-blue-700: #1557B0;
  --c-blue-800: #0F3D80;
  --c-ink-900:  #0B1220;
  --c-gray-800: #1F2937;
  --c-gray-600: #5B6472;
  --c-gray-bg:  #F6F8FC;
  --c-white:    #FFFFFF;
  --c-green:    #34A853;
  --c-red:      #EA4335;
  --c-amber:    #F9AB00;
  --c-violet:   #6B4EFF;
  --c-teal:     #009688;
  --c-gold:     #FFD700;

  /* คู่ "สีตัวอักษร" ของแต่ละสี — ตัวเต็มใช้เป็นพื้นได้ แต่เป็นตัวหนังสือแล้วตก AA
     (ทองล้วน 1.68:1 · เขียวล้วน 2.59:1 · แดงล้วน ~3.9:1 — วัดบนพื้นจางของตัวเอง) */
  --c-amber-700: #8A5A00;  /* 5.46:1 */
  --c-green-800: #14672A;  /* 5.9:1  */
  --c-red-800:   #B71C1C;  /* 7.0:1  */

  /* ─── 2) Semantic — ชื่อที่คอมโพเนนต์เรียกใช้ ────────────── */
  --color-primary:       var(--c-blue-500);
  --color-primary-hover: var(--c-blue-700);
  --color-link:          var(--c-blue-600);
  --color-on-primary:    var(--c-white);
  --color-ink:           var(--c-ink-900);
  --color-text:          var(--c-gray-800);
  --color-muted:         var(--c-gray-600);
  --color-bg:            var(--c-gray-bg);
  --color-surface:       var(--c-white);
  --color-success:       var(--c-green);
  --color-danger:        var(--c-red);
  --color-warning:       var(--c-amber);
  --color-success-text:  var(--c-green-800);
  --color-danger-text:   var(--c-red-800);
  --color-warning-text:  var(--c-amber-700);
  --line: rgba(var(--rgb-shadow), .10);

  /* ─── 3) ชุด r,g,b ───────────────────────────────────────── */
  --rgb-primary:     26,115,232;
  --rgb-ink:         11,18,32;
  --rgb-text:        31,41,55;
  --rgb-bg:          246,248,252;
  --rgb-white:       255,255,255;
  --rgb-success:     52,168,83;
  --rgb-danger:      234,67,53;
  --rgb-warning:     249,171,0;
  --rgb-violet:      107,78,255;
  --rgb-teal:        0,150,136;
  --rgb-shadow:      15,23,42;
  --rgb-shadow-deep: 2,6,23;

  /* ─── 4) รูปทรง เงา ระยะ ─────────────────────────────────── */
  --r8:  8px;
  --r12: 12px;
  --r16: 16px;
  --r24: 24px;
  --shadow-soft: 0 6px 16px -8px rgba(var(--rgb-shadow), .28);
  --shadow:      0 14px 30px -12px rgba(var(--rgb-shadow), .34);

  /* ─── 5) ไทล์แอป — เจ็ดตระกูล ★ ตัวตนของหน้าตาชุดนี้ ★ ──────
     บล็อกสีทึบไอคอนขาว เหมือนไอคอนแอปบนหน้าจอมือถือ ไม่ใช่ป้ายกำกับหมวด
     ⚠️ ทองใช้หมึกเข้ม ไม่ใช่ขาว ⚠️ ขาวบนทอง 2.18:1 อ่านไม่ออกจริง
        ส่วนหมึกเข้มบนทอง 8.59:1 — ทองจึงยังเป็นทองได้โดยที่ไอคอนยังอ่านออก
        (ถ้าดันใช้ขาว ต้องทำทองให้เข้มจนกลายเป็นสีบรอนซ์ ซึ่งเสียสิ่งที่สีนั้นสื่อ) */
  --tile-blue-a:   #4A9BFF;  --tile-blue-b:   #1557B0;
  --tile-green-a:  #3DBB61;  --tile-green-b:  #17803C;
  --tile-violet-a: #9B84FF;  --tile-violet-b: #4A2FD6;
  --tile-teal-a:   #34B9B0;  --tile-teal-b:   #0F766E;
  --tile-gold-a:   #FFC44D;  --tile-gold-b:   #C98500;
  --tile-rose-a:   #FF8A80;  --tile-rose-b:   #B7332A;
  --tile-indigo-a: #7C8CFF;  --tile-indigo-b: #3538A8;
  --tile-ink:      var(--c-white);
  --tile-ink-gold: var(--c-ink-900);
}

/* ════════════════════════════════════════════════════════════
   โหมดมืด
   ★ ทำไมต้องมี ★ Telegram ให้ผู้ใช้เลือกธีมเอง และคนจำนวนมากใช้ธีมมืด
   มินิแอปที่สว่างอยู่ชุดเดียวจะแสบตาและดูเหมือนหลุดออกมาจากที่อื่น

   ★ ค่าทุกตัวคำนวณคอนทราสต์มาแล้ว (พื้นการ์ด #18202E) ★
     ตัวอักษรหลัก #E6EAF2  13.55:1     ตัวรอง #9BA6B8   6.65:1
     ลิงก์ฟ้า     #7FB0F5   7.34:1     เขียว  #6FD08A   8.61:1
     แดง         #FF8A80   7.16:1     ทอง    #FFC44D  10.32:1
     ขาวบนปุ่มหลัก #1A73E8  4.51:1 (สีปุ่มไม่เปลี่ยนตามโหมด — แบรนด์ต้องคงที่)

   สลับโหมดด้วยสามทาง เรียงตามลำดับที่ชนะกัน:
     1. ผู้ใช้เลือกเอง       → <html data-theme="dark">  (แรงสุด)
     2. Telegram บอกมา      → js/tg.js เขียน data-theme ให้ตาม colorScheme
     3. ระบบปฏิบัติการ      → prefers-color-scheme (ตอนเปิดนอก Telegram)
   ════════════════════════════════════════════════════════════ */

/* ⚠️ เขียนเป็นชุดโทเคนล้วน ห้ามใส่กฎคอมโพเนนต์ในบล็อกมืด ⚠️
   คอมโพเนนต์ต้องอ่านผ่านโทเคนเสมอ ไม่งั้นวันที่เพิ่มคอมโพเนนต์ใหม่
   มันจะสว่างอยู่ตัวเดียวในโหมดมืด และไม่มีใครรู้จนกว่าจะมีคนเปิดดู */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-ink-900:  #F3F6FB;
    --c-gray-800: #E6EAF2;
    --c-gray-600: #9BA6B8;
    --c-gray-bg:  #0E1522;
    --c-white:    #18202E;
    --c-blue-600: #7FB0F5;
    --c-green-800: #6FD08A;
    --c-red-800:   #FF8A80;
    --c-amber-700: #FFC44D;
    --rgb-ink:    243,246,251;
    --rgb-text:   230,234,242;
    --rgb-bg:     14,21,34;
    --rgb-white:  24,32,46;
    --rgb-shadow: 0,0,0;
    --rgb-shadow-deep: 0,0,0;
    --line: rgba(255,255,255,.12);
    --shadow-soft: 0 6px 16px -8px rgba(0,0,0,.6);
    --shadow:      0 14px 30px -12px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  --c-ink-900:  #F3F6FB;
  --c-gray-800: #E6EAF2;
  --c-gray-600: #9BA6B8;
  --c-gray-bg:  #0E1522;
  --c-white:    #18202E;
  --c-blue-600: #7FB0F5;
  --c-green-800: #6FD08A;
  --c-red-800:   #FF8A80;
  --c-amber-700: #FFC44D;
  --rgb-ink:    243,246,251;
  --rgb-text:   230,234,242;
  --rgb-bg:     14,21,34;
  --rgb-white:  24,32,46;
  --rgb-shadow: 0,0,0;
  --rgb-shadow-deep: 0,0,0;
  --line: rgba(255,255,255,.12);
  --shadow-soft: 0 6px 16px -8px rgba(0,0,0,.6);
  --shadow:      0 14px 30px -12px rgba(0,0,0,.7);
}

/* ════════════════════════════════════════════════════════════
   สะพานเชื่อมกับธีมของ Telegram
   Telegram ส่งสีของธีมผู้ใช้มาเป็นตัวแปร --tg-theme-* ให้อัตโนมัติ

   ★ ค่าตั้งต้นคือ "ใช้สีของเราเอง" ★ มินิแอปนี้ควรหน้าตาเหมือนกันทุกเครื่อง
   เพราะสีคือตัวตนของแบรนด์ — และ --tg-theme-button-color ของผู้ใช้บางคน
   ทำให้ตัวหนังสือขาวตก AA ซึ่งเราตรวจแทนเขาไม่ได้

   อยากให้กลืนไปกับ Telegram มากขึ้น: เปิดบรรทัดในบล็อกข้างล่างนี้
   (พื้นกับพื้นการ์ดปลอดภัยที่สุด เพราะเราคุมตัวหนังสือบนมันเองอยู่แล้ว...
    ★ ซึ่งก็ยังไม่จริงเสมอไป ★ ถ้าผู้ใช้ตั้งพื้นเป็นสีกลาง ๆ ตัวหนังสือของเรา
    อาจตก AA — เปิดแล้วต้องไปวัดเองในธีมที่หลากหลาย) */
:root[data-tg-native="1"] {
  --c-gray-bg: var(--tg-theme-bg-color, #F6F8FC);
  --c-white:   var(--tg-theme-secondary-bg-color, #FFFFFF);
  /* --color-primary: var(--tg-theme-button-color, #1A73E8);      ← ดูคำเตือนข้างบน
     --color-on-primary: var(--tg-theme-button-text-color, #fff); */
}