/* =============================================================================
   assets/css/tokens.css — ระบบ design token กลาง และกฎ accessibility พื้นฐาน
   =============================================================================
   ไฟล์นี้ต้องโหลด "เป็นไฟล์สุดท้าย" เสมอ เพราะกฎ :focus-visible ด้านล่างต้อง
   ชนะกฎ outline:none ที่กระจายอยู่ใน CSS เดิม 8 จุด

   หลักการของไฟล์นี้: เพิ่มเท่านั้น ไม่แก้ ไม่ลบของเดิม
   หน้าตาของระบบในสถานะปกติต้องไม่เปลี่ยนแม้แต่พิกเซลเดียว
   สิ่งที่เปลี่ยนคือสถานะที่ "เดิมไม่มี" เท่านั้น (focus จากคีย์บอร์ด)
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. Design token
   -----------------------------------------------------------------------------
   ระบบเดิมมี token เฉพาะ "สี" และประกาศซ้ำกันใน 6 ไฟล์ ไม่มี token ของ
   ระยะห่างและขนาดตัวอักษรเลย ทุกระยะจึงมาจากการพิมพ์ตัวเลขเอาเอง

   token ชุดนี้มีไว้ให้ "โค้ดใหม่" ใช้ เพื่อหยุดปัญหาไม่ให้ลุกลามต่อ
   ของเดิมยังทำงานเหมือนเดิมทุกอย่าง ไม่ต้องรีบไล่แก้
   ----------------------------------------------------------------------------- */

:root {
    /* ระยะห่าง — สเกล 4/8 ตรงกับที่ Tailwind ใช้อยู่แล้ว จะได้ไม่มีสองระบบ */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;

    /* ขนาดตัวอักษร — ตรงกับสเกลของ Tailwind
       หมายเหตุ: ระบบเดิมใช้ text-[10px] อยู่ 52 จุดและ text-[9px] อีก 4 จุด
       ซึ่งเล็กกว่าเกณฑ์เนื้อหา 16px มาก ควรค่อย ๆ เลิกใช้ ไม่ใช่แก้รวดเดียว
       เพราะจะทำให้ layout ขยับทั้งระบบ */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;

    /* มุมโค้ง — ตรงกับ borderRadius ที่ตั้งไว้ใน tailwind.config (header.php) */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* สีแบรนด์ — อ้างอิงจาก tailwind.config ซึ่งเป็นชุดที่ระบบใช้มากที่สุด
       ⚠️ ระบบมีเขียวอยู่ 3 เฉดที่ไม่ตรงกัน และ "จงใจไม่รวมเป็นสีเดียวในตอนนี้"
       เพราะการรวมจะเปลี่ยนหน้าตาของหน้าเดิมทันที:
         tailwind brand-700  #00754c  (ใช้มากที่สุด — หน้าใน)
         --primary           #1a6b3a  (budget, project-index/view/edit)
         --primary           #003d22  (landing.css เท่านั้น)
       ถ้าจะรวมให้เป็นสีเดียว ต้องทำเป็นงานแยกและตรวจทุกหน้าด้วยตา */
    --brand-500: #00a86b;
    --brand-600: #008f5d;
    --brand-700: #00754c;

    /* สีข้อความ — ค่าที่ผ่านเกณฑ์ contrast AA (4.5:1) บนพื้นขาว
       ระบบเดิมใช้ text-slate-400 (2.56:1) อยู่ 146 จุด ซึ่งไม่ผ่านเกณฑ์
       ใช้ค่าเหล่านี้แทนเมื่อเขียนโค้ดใหม่ */
    --text-strong: #334155;  /* slate-700 — 10.35:1 */
    --text-body:   #475569;  /* slate-600 —  7.58:1 */
    --text-muted:  #64748b;  /* slate-500 —  4.76:1 ผ่านเกณฑ์ต่ำสุดที่ยังใช้ได้ */

    /* วงแหวน focus — brand-700 ให้ contrast 5.76:1 บนพื้นขาว
       เกณฑ์ WCAG 1.4.11 สำหรับองค์ประกอบที่ไม่ใช่ข้อความคือ 3:1 จึงผ่านสบาย */
    --focus-ring-color: #00754c;
    --focus-ring-width: 3px;
    --focus-ring-offset: 2px;
}


/* -----------------------------------------------------------------------------
   2. Focus ที่มองเห็นได้ — แก้ปัญหาที่ร้ายแรงที่สุดของระบบ
   -----------------------------------------------------------------------------
   ก่อนหน้านี้: ปุ่ม <button> ทั้ง 43 ตัวไม่มีสไตล์ focus เลยสักตัว และ CSS
   สั่ง outline:none อยู่ 8 จุด ทำให้คนที่ใช้คีย์บอร์ดหรือ screen reader
   ไม่มีทางรู้เลยว่าตอนนี้โฟกัสอยู่ที่ไหน — ใช้งานระบบไม่ได้จริง

   ใช้ :focus-visible ไม่ใช่ :focus เพราะเบราว์เซอร์จะแสดงเฉพาะตอนที่ผู้ใช้
   สั่งด้วยคีย์บอร์ด การคลิกเมาส์จะไม่ขึ้นวงแหวน หน้าตาปกติจึงไม่เปลี่ยน
   ----------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="link"]:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    /* กัน outline ถูกบังโดย element ที่ซ้อนทับอยู่ */
    position: relative;
    z-index: 1;
    /* ยกเลิก outline:none ที่ประกาศไว้ในไฟล์อื่นด้วยลำดับการโหลด
       ไม่ใช้ !important เพราะไฟล์นี้ถูกโหลดท้ายสุดอยู่แล้ว */
    border-radius: inherit;
}

/* บนพื้นเข้ม วงแหวนสีเขียวจะกลืน จึงสลับเป็นสีขาว
   ครอบเฉพาะปุ่มที่มีพื้นหลังเป็นสีแบรนด์เข้ม ซึ่งเป็น pattern ที่ระบบใช้อยู่ */
.bg-brand-600:focus-visible,
.bg-brand-700:focus-visible,
.bg-brand-800:focus-visible,
.sidebar-logout-btn:focus-visible {
    outline-color: #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(0, 117, 76, 0.35);
}

/* ผู้ใช้เมาส์ไม่ต้องเห็นวงแหวน — คงพฤติกรรมเดิมของระบบไว้ทุกประการ */
:focus:not(:focus-visible) {
    outline: none;
}

/* ข้ามไปยังเนื้อหาหลัก (skip link) — ซ่อนไว้จนกว่าจะโฟกัสด้วยคีย์บอร์ด
   ใช้ได้ทันทีถ้าหน้าไหนเพิ่ม <a class="skip-to-content" href="#main"> */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: var(--space-2);
    z-index: 9999;
    padding: var(--space-3) var(--space-4);
    background: var(--brand-700);
    color: #ffffff;
    border-radius: var(--radius-sm);
    font-weight: 700;
    text-decoration: none;
}

.skip-to-content:focus {
    left: var(--space-4);
}


/* -----------------------------------------------------------------------------
   3. ขนาดเป้าแตะขั้นต่ำ (opt-in)
   -----------------------------------------------------------------------------
   ระบบมีปุ่มขนาด 32px (w-8 h-8) อยู่ 24 จุด ซึ่งต่ำกว่าเกณฑ์ 44px
   ไม่บังคับใช้ทั้งระบบเพราะจะดัน layout เดิม ให้ใส่คลาสนี้ทีละจุดแทน
   วิธีนี้ขยายพื้นที่กดโดยที่ขนาดที่มองเห็นยังเท่าเดิม
   ----------------------------------------------------------------------------- */

.tap-target {
    position: relative;
}

.tap-target::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    /* ไม่วาดอะไร แค่ขยายพื้นที่รับการกด */
}


/* -----------------------------------------------------------------------------
   4. เคารพการตั้งค่าลดการเคลื่อนไหวของผู้ใช้
   -----------------------------------------------------------------------------
   ผู้ใช้บางกลุ่มเวียนหัวหรือคลื่นไส้จาก animation (vestibular disorder)
   ระบบปฏิบัติการมีสวิตช์ให้ปิด เว็บต้องเคารพค่านั้น
   ----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}