/* ============================================================
   WMS Portal — Shared Design Tokens
   ============================================================
   ระบบดีไซน์กลางของทุกแอปใน portal — ใส่ลิงก์นี้ "ก่อน" <style> ของแอป:

     <link rel="stylesheet" href="/shared/design-tokens.css">

   สิ่งที่ไฟล์นี้ให้:
   1. ฟอนต์กลาง (โหลดจากที่นี่ที่เดียว — แอปที่ migrate แล้วห้ามใส่ <link>
      Google Fonts ของตัวเองซ้ำ)
        --wms-font-display : Mitr           → หัวข้อ, ชื่อแอป, ปุ่ม, ตัวเลข KPI ใหญ่
        --wms-font-body    : Noto Sans Thai → เนื้อความ, ฟอร์ม, ตาราง
        --wms-font-mono    : JetBrains Mono → รหัส/จำนวน/เวลาในตารางข้อมูล
   2. ตัวแปรสี/รัศมี/เงา (prefix --wms-)
   3. คลาสกลางที่ทุกแอปใช้ร่วมกัน: .glass-panel, .glass-input

   สี accent ประจำแอป: header.js ตั้ง --wms-accent ให้อัตโนมัติจาก
   data-accent ของ <header data-wms-header> — แอปประกาศซ้ำใน :root
   ของตัวเองได้ถ้าต้องใช้ก่อน header.js ทำงาน

   ข้อควรระวัง: อย่าอ้างน้ำหนักฟอนต์ที่ไม่ได้โหลดด้านล่าง — Mitr ทั้ง
   ตระกูลมีแค่ 200–700 (font-extrabold/800 จะโดน clamp เป็น 700)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@200;300;400;500;600;700&family=Noto+Sans+Thai:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    /* ── Fonts ── */
    --wms-font-display: 'Mitr', 'Noto Sans Thai', sans-serif;
    --wms-font-body: 'Noto Sans Thai', 'Mitr', sans-serif;
    --wms-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* ── Neutrals (สเกล slate — ค่าเดียวกับที่ portal/header.js ใช้อยู่) ── */
    --wms-bg: #f8fafc;
    --wms-surface: #ffffff;
    --wms-surface-2: #f1f5f9;
    --wms-border: #e2e8f0;
    --wms-border-strong: #cbd5e1;
    --wms-text: #0f172a;
    --wms-text-2: #334155;
    --wms-text-3: #64748b;
    --wms-text-faint: #94a3b8;

    /* ── Brand & per-app accent ── */
    --wms-brand: #ea580c;           /* ส้ม portal — ใช้กับ shell/ของกลางเท่านั้น */
    --wms-accent: var(--wms-brand); /* แต่ละแอป override (= ค่า data-accent ของตน) */

    /* ── Semantic ── */
    --wms-success: #16a34a;
    --wms-success-soft: #dcfce7;
    --wms-success-text: #166534;
    --wms-warning: #d97706;
    --wms-warning-soft: #fef3c7;
    --wms-warning-text: #92400e;
    --wms-danger: #dc2626;
    --wms-danger-soft: #fee2e2;
    --wms-danger-text: #991b1b;
    --wms-info: #2563eb;
    --wms-info-soft: #dbeafe;
    --wms-info-text: #1e40af;

    /* ── Radius ── */
    --wms-radius-sm: 8px;    /* แอป data-dense: ปุ่ม/ช่องกรอกในตาราง */
    --wms-radius: 12px;      /* ปุ่ม/อินพุตทั่วไป */
    --wms-radius-lg: 16px;   /* การ์ด */
    --wms-radius-xl: 20px;   /* modal/แผงใหญ่ */
    --wms-radius-pill: 9999px;

    /* ── Shadows ── */
    --wms-shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
    --wms-shadow-pop: 0 25px 60px -20px rgba(15, 23, 42, 0.45);
}

/* ── Base — แอปที่ migrate แล้ว ลบ font-family ของ body/heading/ปุ่ม
      ในไฟล์ตัวเองทิ้งได้เลย ── */
body {
    font-family: var(--wms-font-body);
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--wms-font-display);
}
/* ใช้ body button (specificity 0,0,2) เพื่อชนะ preflight ของ Tailwind CDN
   (button{font-family:inherit}) ซึ่ง inject ทีหลังไฟล์นี้เสมอ —
   คลาสของแอปเอง (เช่น .btn{font-family:...}) ยังชนะกฎนี้ตามปกติ */
body button {
    font-family: var(--wms-font-display);
}

/* ── Shared components (สูตรเดียวกับ portal) ── */
.glass-panel {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: var(--wms-shadow-card);
}
.glass-input {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--wms-border-strong);
    color: var(--wms-text);
    transition: all 0.2s;
}
.glass-input:focus {
    outline: none;
    background: #ffffff;
    border-color: var(--wms-accent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--wms-accent) 15%, transparent);
}