/* ============================================================
   ORDER HUB — Design Tokens (frozen 2026-08-13, doc 08 §2)
   ห้ามแก้ค่าใดโดยไม่ผ่าน CR — component ทุกตัวอ้างตัวแปรที่นี่เท่านั้น
   ไฟล์นี้คัดลอกตรงจาก docs/08-ui-design-spec.md §2.1 (paste-ready block)
   และเป็น "ไฟล์เดียวในระบบที่อนุญาตให้มี hex literal" (§2.2)
   ============================================================ */
:root {
  /* ---------- 1. Brand & primary ---------- */
  --c-primary:            #2563EB;   /* primary blue — ปุ่มหลัก, nav active pill, ลิงก์ */
  --c-primary-hover:      #1D4ED8;
  --c-primary-active:     #1E40AF;
  --c-primary-tint:       #DBEAFE;   /* พื้นอ่อนของ chip/สถานะ */
  --c-primary-tint-weak:  #EFF6FF;   /* พื้น hover ของแถวตาราง */
  --c-on-primary:         #FFFFFF;

  /* ---------- 2. Semantic ---------- */
  --c-success:            #16A34A;
  --c-success-tint:       #DCFCE7;
  --c-success-ink:        #166534;
  --c-warning:            #F59E0B;
  --c-warning-tint:       #FEF3C7;
  --c-warning-ink:        #92400E;
  --c-danger:             #DC2626;
  --c-danger-hover:       #B91C1C;
  --c-danger-tint:        #FEE2E2;
  --c-danger-ink:         #991B1B;
  --c-violet:             #7C3AED;
  --c-violet-tint:        #EDE9FE;
  --c-violet-ink:         #5B21B6;
  --c-teal:               #0D9488;
  --c-teal-tint:          #CCFBF1;
  --c-teal-ink:           #115E59;
  --c-info-ink:           #1E40AF;

  /* ---------- 3. Surfaces ---------- */
  --c-sidebar:            #16223A;   /* navy จาก mockup */
  --c-sidebar-2:          #1B2740;   /* บล็อกผู้ใช้ด้านล่าง / hover */
  --c-sidebar-ink:        #FFFFFF;
  --c-sidebar-muted:      #B6C0D0;   /* สว่างขึ้นจาก #8A94A6 — วรรณยุกต์ไทยเป็นเส้น 1px */
  --c-sidebar-section:    #C2CBD9;   /* label หมวดตัวเล็ก — สว่างขึ้นจาก #98A3B6 */
  --c-bg:                 #F6F7F9;   /* page background */
  --c-surface:            #FFFFFF;   /* card */
  --c-surface-sunken:     #F9FAFB;   /* thead, well, code block */
  --c-border:             #E9ECF1;   /* hairline */
  --c-border-strong:      #D5DAE3;   /* input border, divider ที่ต้องเห็นชัด */
  --c-overlay:            rgba(17, 24, 39, .48);

  /* ---------- 4. Text ---------- */
  --c-text:               #111827;
  --c-text-muted:         #6B7280;
  --c-text-subtle:        #9CA3AF;   /* placeholder เท่านั้น — ห้ามใช้กับข้อมูลจริง */
  --c-text-invert:        #FFFFFF;
  --c-link:               #2563EB;
  --c-link-visited:       #6D28D9;

  /* ---------- 5. Order status (frozen — doc 08 §2.4) ---------- */
  --st-received-bg:       #F1F5F9;  --st-received-ink:       #475569;  --st-received-bd:       #CBD5E1;
  --st-needsreview-bg:    #FEF3C7;  --st-needsreview-ink:    #92400E;  --st-needsreview-bd:    #FDE68A;
  --st-confirmed-bg:      #DBEAFE;  --st-confirmed-ink:      #1E40AF;  --st-confirmed-bd:      #BFDBFE;
  --st-inproduction-bg:   #EDE9FE;  --st-inproduction-ink:   #5B21B6;  --st-inproduction-bd:   #DDD6FE;
  --st-readytoship-bg:    #CCFBF1;  --st-readytoship-ink:    #115E59;  --st-readytoship-bd:    #99F6E4;
  --st-shipped-bg:        #DCFCE7;  --st-shipped-ink:        #166534;  --st-shipped-bd:        #BBF7D0;
  --st-cancelled-bg:      #FEE2E2;  --st-cancelled-ink:      #991B1B;  --st-cancelled-bd:      #FECACA;

  /* ---------- 6. Job status (frozen — doc 08 §2.4) ---------- */
  --job-waiting-bg:       #F1F5F9;  --job-waiting-ink:       #475569;
  --job-ready-bg:         #DBEAFE;  --job-ready-ink:         #1E40AF;
  --job-assigned-bg:      #E0E7FF;  --job-assigned-ink:      #3730A3;
  --job-inprogress-bg:    #EDE9FE;  --job-inprogress-ink:    #5B21B6;
  --job-blocked-bg:       #FFEDD5;  --job-blocked-ink:       #9A3412;
  --job-cancelreq-bg:     #FEF3C7;  --job-cancelreq-ink:     #92400E;
  --job-completed-bg:     #DCFCE7;  --job-completed-ink:     #166534;
  --job-failed-bg:        #FEE2E2;  --job-failed-ink:        #991B1B;
  --job-cancelled-bg:     #E2E8F0;  --job-cancelled-ink:     #475569;

  /* ---------- 7. Platform chips (5 ค่าจากตาราง platforms) ---------- */
  --pf-facebook-bg:  #E7F0FE;  --pf-facebook-ink:  #0B4FA8;  --pf-facebook-dot:  #1877F2;
  --pf-shopee-bg:    #FDEDE8;  --pf-shopee-ink:    #A8331A;  --pf-shopee-dot:    #EE4D2D;
  --pf-lazada-bg:    #EAEAF6;  --pf-lazada-ink:    #262C86;  --pf-lazada-dot:    #0F146D;
  --pf-tiktok-bg:    #F1F1F2;  --pf-tiktok-ink:    #1F2328;  --pf-tiktok-dot:    #111827;
  --pf-line-bg:      #E4F7EC;  --pf-line-ink:      #0B6B37;  --pf-line-dot:      #06C755;

  /* ---------- 8. Typography ---------- */
  --font-ui: "Inter", "IBM Plex Sans Thai", "Noto Sans Thai", "Sarabun", "Leelawadee UI",
             "Sarabun", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-num: "Inter", "IBM Plex Sans Thai", system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

  --fs-display: 32px;  --lh-display: 1.25;
  --fs-h1:      28px;  --lh-h1:      1.30;
  --fs-h2:      20px;  --lh-h2:      1.35;
  --fs-h3:      16px;  --lh-h3:      1.45;
  --fs-body:    15px;  --lh-body:    1.65;   /* ไทยต้อง ≥1.6 (§7.2) */
  --fs-sm:      14px;  --lh-sm:      1.70;
  --fs-xs:      13px;  --lh-xs:      1.75;
  --fs-label:   11px;  --lh-label:   1.50;   /* Latin uppercase เท่านั้น */

  --fw-regular: 400;  --fw-medium: 500;  --fw-semibold: 600;  --fw-bold: 700;

  /* ---------- 9. Spacing (4px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --card-pad:      24px;
  --card-pad-sm:   16px;
  --content-pad:   24px;
  --content-max:   1440px;

  /* ---------- 10. Radii ---------- */
  --r-sm: 6px;  --r-md: 8px;  --r-lg: 12px;  --r-xl: 16px;  --r-pill: 999px;

  /* ---------- 11. Shadows ---------- */
  --sh-xs: 0 1px 2px rgba(16, 24, 40, .04);
  --sh-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
  --sh-md: 0 4px 12px rgba(16, 24, 40, .08);
  --sh-lg: 0 12px 32px rgba(16, 24, 40, .14);
  --sh-focus: 0 0 0 3px rgba(37, 99, 235, .40);
  --sh-focus-danger: 0 0 0 3px rgba(220, 38, 38, .35);

  /* ---------- 12. Motion ---------- */
  --dur-fast: 120ms;  --dur-base: 180ms;  --dur-slow: 260ms;
  --ease: cubic-bezier(.2, 0, .2, 1);

  /* ---------- 13. Layout metrics ---------- */
  --sidebar-w:      250px;
  --sidebar-rail-w: 72px;
  --topbar-h:       68px;
  --tabbar-h:       60px;
  --tap-min:        44px;   /* touch target ขั้นต่ำ — ห้ามต่ำกว่า */

  /* ---------- 14. Z-layers (ค่าอื่นห้ามใช้) ---------- */
  --z-base: 0;  --z-sticky: 100;  --z-dropdown: 200;  --z-drawer: 300;
  --z-backdrop: 400;  --z-modal: 410;  --z-toast: 500;  --z-offline: 600;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}