/* ════════════════════════════════════════════════════════════
   AliceLium Design Tokens — แหล่งความจริงเดียวของสีทั้งเว็บ
   v3.0: 3 ชั้น primitive → semantic → alias (ชื่อเดิมของ theme.css)

   กติกา (บังคับใน code review): ห้ามมี hex สีนอกไฟล์นี้
   ห้ามใช้ inline style ที่มีสีในเทมเพลต

   AA fixes (วัดจริงจากรอบออกแบบ v3.0):
   - ตัวอักษร/ลิงก์ฟ้าบนพื้นอ่อน ใช้ --c-blue-600 #1765CC (5.2:1 ✓)
     #1A73E8 เป็นสีพื้น (fill) เท่านั้น (ขาวบน #1A73E8 = 4.5:1 ✓)
   - muted เปลี่ยน #6B7280 → #5B6472 (5.6:1 ✓ บน glass card)
   ════════════════════════════════════════════════════════════ */

:root {
  /* ─── 1) Primitives ─────────────────────────── */
  --c-blue-500: #1A73E8;
  --c-blue-600: #1765CC;
  --c-blue-700: #1557B0;
  --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-purple:   #9C27B0;
  --c-gold:     #FFD700;
  /* คู่ "สีตัวอักษร" ของทอง/เขียว — แบบเดียวกับที่ฟ้าแยก fill(#1A73E8)/text(#1765CC)
     ตัวเต็มใช้เป็นพื้นได้ แต่เอามาเป็นตัวหนังสือบนพื้นอ่อนแล้วตก AA
     (ทอง 1.68:1 · เขียว 2.59:1 — วัดจริงบนชิปหมวด) */
  --c-amber-700: #8A5A00;
  --c-green-800: #14672A;

  /* สีแบรนด์ Google (ตาม Google Identity Guidelines) — ใช้เฉพาะโลโก้ G บนปุ่มล็อกอิน
     ต้องเป็น token เพราะเทมเพลตห้ามมี hex (test_no_hardcoded_hex_colors) */
  --g-blue:   #4285F4;
  --g-green:  #34A853;
  --g-yellow: #FBBC05;
  --g-red:    #EA4335;

  /* ─── 2) Semantic ───────────────────────────── */
  --color-primary:       var(--c-blue-500);  /* fill เท่านั้น */
  --color-primary-hover: var(--c-blue-700);
  --color-link:          var(--c-blue-600);  /* ตัวอักษร interactive */
  --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-special:       var(--c-purple);
  --color-gold:          var(--c-gold);
  --color-warning-text:  var(--c-amber-700);  /* ตัวหนังสือทองบนพื้นอ่อน (5.1:1) */
  --color-success-text:  var(--c-green-800);  /* ตัวหนังสือเขียวบนพื้นอ่อน (5.9:1) */

  /* ─── 3) Aliases — ชื่อเดิมที่ theme.css ใช้ (compat layer)
         ห้ามใช้ชื่อกลุ่มนี้ในโค้ดใหม่ — ใช้ semantic เท่านั้น ── */
  --blue:     var(--color-primary);
  --blue-700: var(--color-primary-hover);
  --ink:      var(--color-ink);
  --text:     var(--color-text);
  --muted:    var(--color-muted);
  --bg:       var(--color-bg);
  --card:     var(--color-surface);
  --success:  var(--color-success);
  --danger:   var(--color-danger);
  --warning:  var(--color-warning);
  --special:  var(--color-special);
  --gold:     var(--color-gold);
/* ─── เพิ่มจาก dev-kit (V012) ─── */
  --c-blue-800: #0F3D80;
  --color-primary-deep: var(--c-blue-800);
  --color-bg-soft: #F7F9FC;

  --blue-800: var(--color-primary-deep);
  --bg-soft:  var(--color-bg-soft);
  --line:     rgba(15,23,42,.10);
  --border:   var(--line);  /* theme.css อ้าง var(--border) 6 จุด — ไม่มีแล้วเส้นขอบหายทั้งเว็บ */
}

/* Alpine: ซ่อน element ที่มี x-cloak จนกว่า Alpine จะ init เสร็จ
   ไม่มีบรรทัดนี้ = บล็อก "กำลังอัปโหลด" กะพริบโผล่มาก่อนตอนโหลดหน้า */
[x-cloak] { display: none !important; }