/* Design token ที่ทั้งสองระบบใช้ร่วมกัน (§12.1, design canvas 9 ก.ย. 69)
 *
 * ระบบสีมีสามระดับต่อหนึ่งความหมาย และแต่ละระดับมีที่ใช้ตายตัว
 *   --c-x-tint    พื้นหลังพาสเทล  ใช้กับการ์ด แถบ และ badge
 *   --c-x         ไอคอนและเส้น    ผ่าน contrast 3:1
 *   --c-x-deep    ตัวอักษรและปุ่ม  ผ่าน contrast 4.5:1
 *
 * สถานะถังใช้สีตายตัวทุกหน้า: เขียว = ในคลัง/ปกติ · ม่วง = บนรถ · ฟ้า = อยู่ที่ร้าน
 * เหลือง = ชำรุด/รอดำเนินการ · แดง = สูญหาย/ผิดพลาด
 * ห้ามใช้สีเป็นตัวบอกสถานะเพียงอย่างเดียว ต้องมีไอคอนหรือข้อความกำกับเสมอ
 */
:root {
    /* กลาง */
    --c-bg:            #f5f8fb;
    --c-surface:       #ffffff;
    --c-surface-sunk:  #eef3f8;
    --c-border:        #dfe7ef;
    --c-border-strong: #c6d3df;
    --c-text:          #172433;
    --c-text-muted:    #5f7185;

    /* แบรนด์ — ฟ้าน้ำแข็ง (ใช้กับ "อยู่ที่ร้าน" ด้วย) */
    --c-brand-tint: #e6f1fb;
    --c-brand:      #3f86c6;
    --c-brand-deep: #2a5f92;

    /* ในคลัง / ปกติ / สำเร็จ */
    --c-ok-tint: #e6f5ee;
    --c-ok:      #2e8f6e;
    --c-ok-deep: #1f6f53;

    /* บนรถ */
    --c-truck-tint: #efeafb;
    --c-truck:      #7a63c9;
    --c-truck-deep: #584293;

    /* ชำรุด / รอดำเนินการ */
    --c-warning-tint: #fdf3e2;
    --c-warning:      #b07a1e;
    --c-warning-deep: #8a5f14;

    /* สูญหาย / ผิดพลาด */
    --c-danger-tint: #fcecec;
    --c-danger:      #c5504a;
    --c-danger-deep: #9c3831;

    --c-success-tint: var(--c-ok-tint);
    --c-success:      var(--c-ok);
    --c-success-deep: var(--c-ok-deep);

    /* ระยะ — ทวีคูณของ 4px */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

    --radius-sm:   8px;
    --radius:      14px;
    --radius-lg:   20px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(23, 36, 51, .05);
    --shadow:    0 4px 16px rgba(23, 36, 51, .07);

    --font: "Sarabun", "Noto Sans Thai", -apple-system, BlinkMacSystemFont,
            "Segoe UI", "Leelawadee UI", Roboto, sans-serif;

    --fs-xs:  12px;
    --fs-sm:  14px;
    --fs-md:  16px;
    --fs-lg:  20px;
    --fs-xl:  26px;
    --fs-2xl: 34px;

    --lh-tight: 1.3;
    --lh-body:  1.55;

    --touch-min:  44px;
    --nav-height: 72px;
    --icon-sm:    18px;
    --icon:       22px;
    --icon-lg:    28px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: var(--lh-tight); font-weight: 700; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
    outline: 3px solid var(--c-brand);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

a { color: var(--c-brand-deep); }

.icon { display: inline-block; flex: none; vertical-align: -0.15em; }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ================= badge สถานะ (ใช้ร่วมกันทั้งสองฝั่ง) ================= */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.badge--ok      { background: var(--c-ok-tint);      color: var(--c-ok-deep); }
.badge--truck   { background: var(--c-truck-tint);   color: var(--c-truck-deep); }
.badge--brand   { background: var(--c-brand-tint);   color: var(--c-brand-deep); }
.badge--warning { background: var(--c-warning-tint); color: var(--c-warning-deep); }
.badge--danger  { background: var(--c-danger-tint);  color: var(--c-danger-deep); }
.badge--muted   { background: var(--c-surface-sunk); color: var(--c-text-muted); }
.badge__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

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