/* ============================================================
   THEME / STYLE MASTER — แหล่งรวม "สี + โทเค็น" กลางของทั้งระบบ
   ------------------------------------------------------------
   • แก้สี/ฟอนต์/ระยะ/มุมโค้ง/เงา ที่ไฟล์นี้ "ที่เดียว"
     แล้วมีผลทั้ง Desktop และ Mobile (ไม่โดดไปมา)
   • โหลดก่อน site.css เสมอ (ดู _Layout.cshtml)
   • เปลี่ยนธีม/แบรนด์ = แก้เฉพาะค่าในบล็อก :root ด้านล่าง
   ------------------------------------------------------------
   ธีมปัจจุบัน: AU Mono — Black / White / Gray (2026-07-10)
     #1f1f1f ดำ = ปุ่ม/องค์ประกอบเด่น, ขาว/เทาอ่อน = พื้นหลัง
     สีสถานะเป็นโทนหม่น; โลโก้ไล่เฉดดำ-เทา
   Rollback: คัดลอกบล็อก ":root" (ตั้งแต่ --color-primary ถึง --overlay-scrim + เงา)
     จาก preset ที่ต้องการ มาทับใน theme.css:
       theme.brand-au-mono.css   → ธีมดำ/ขาว/เทา (ธีมนี้)
       theme.brand-navy-blue.css → ธีมน้ำเงิน
       theme.brand-au-coffee.css → ธีมกาแฟ
       theme.brand-dark-violet.css → ธีมมืด/ม่วง (ผสมเขียว)
     (ส่วน spacing/ฟอนต์/มุมโค้ง/z-index ด้านล่างเป็นโครงสร้าง — ไม่ต้องแตะ)
   ============================================================ */
:root {
    /* ===== สีแบรนด์หลัก — ดำ (เปลี่ยนธีมที่นี่จุดเดียว) ===== */
    --color-primary: #1f1f1f;
    --color-primary-hover: #000000;
    --color-primary-soft: #f2f2f3;
    --brand-start: #3a3a3a;            /* ไล่เฉดโลโก้/ปุ่มเด่น */
    --brand-end: #111111;
    --brand-shadow: rgba(0, 0, 0, 0.24);

    /* ===== พื้นผิว — ขาว/เทาอ่อน ===== */
    --color-bg: #f4f4f5;               /* พื้นหลังเว็บ (เทาอ่อนให้ surface ขาวเด่น) */
    --color-surface: #ffffff;
    --color-surface-alt: #fafafa;
    --color-border: #e3e3e5;           /* กรอบทั่วไป */
    --color-border-strong: #cfcfd2;    /* เข้มขึ้น — กรอบเน้น/hover */

    /* ===== ตัวอักษร — ดำ/เทา ===== */
    --color-text: #1a1a1a;
    --color-muted: #6b6b70;
    --color-faint: #9a9aa0;
    --app-ink: #1a1a1a;                /* หัวข้อ/ตัวเน้น */
    --app-ink-inverse: #ffffff;

    /* ===== สีสถานะ (badge / alert / toast) — โทนหม่นเข้าธีม mono ===== */
    --color-success: #2f7d5b; --color-success-soft: #eef4f0;
    --color-warning: #9a7420; --color-warning-soft: #f6f1e6;
    --color-danger:  #b23b3b; --color-danger-soft:  #f7ecec;
    --color-info:    #3a5a8a; --color-info-soft:    #eef1f6;
    --color-neutral: #6b6b70; --color-neutral-soft: #eeeeef;

    /* ===== accent เผื่อใช้ไฮไลต์/กราฟ — เทากลางเข้าธีม mono ===== */
    --color-accent: #7a7a80; --color-accent-soft: #f0f0f1;

    /* ===== เมนู sidebar: hover / หน้าที่เปิดอยู่ ===== */
    --nav-active-bg: #ededf0;          /* เทาอ่อน — พื้นไฮไลต์ */
    --nav-active-fg: #1a1a1a;          /* ดำ — ตัวอักษร/ไอคอน/แถบ accent */

    /* ===== พื้นผิวพิเศษ (ค่าสว่าง) — ธีมมืดจะ override token กลุ่มนี้ =====
       site.css มีค่า fallback เดิม (สีขาว) อยู่แล้ว — ค่าด้านล่างให้เท่ากันเพื่อความชัดเจน */
    --sidebar-bg: var(--color-surface);
    --input-face:
        linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(250, 249, 247, 0.92)),
        var(--color-surface);
    --surface-solid: #ffffff;
    --sheen-inset: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    --overlay-scrim: rgba(255, 255, 255, 0.7);

    /* ===== ฟอนต์ ===== */
    --ff-sans: "Sarabun", "IBM Plex Sans Thai", "Noto Sans Thai", "Segoe UI", system-ui, sans-serif;
    --ff-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;

    /* ===== ระยะห่าง (spacing scale) ===== */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-8: 32px;

    /* ===== ขนาดตัวอักษร ===== */
    --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px;
    --fs-md: 15px; --fs-lg: 18px; --fs-xl: 22px;

    /* ===== มุมโค้ง ===== */
    --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px;

    /* ===== เงา (เปลี่ยนตามธีม) ===== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.16);

    /* ===== เลย์เอาต์ / z-index ===== */
    --sidebar-width: 212px;
    --sidebar-width-collapsed: 68px;
    --topbar-height: 60px;
    --z-drawer: 1040;
    --z-toast: 1080;
    --z-loading: 1100;
    /* modal ทั่วไป (form/บันทึก) — ต้องต่ำกว่า dropdown/date portal (2100) ไม่งั้น dropdown ในโมดอลจะโดนโมดอลบัง */
    --z-modal: 1800;
    /* overlay เต็มจอที่ append ไปที่ body (สแกนบาร์โค้ด 2110 / กล้อง 2120 / สแกนเอกสาร 2130 / แผ่นเลือกแหล่งรูป 2140)
       อยู่ระหว่าง portal (2100) กับ confirm (2200) — ค่าจริงอยู่ใน site.css ตรง ๆ See LogHistory #51. */
    /* กล่องยืนยัน (appConfirm) ต้องอยู่บนสุดเสมอ — เหนือ modal (1800) และ drawer portal (2100) */
    --z-confirm: 2200;
}