/* ═══════════════════════════════════════════════════════════════════════════
   PAT WorkOS — Design Tokens v1.0   (ชั้นที่ 1 ของ 4 — ต้องโหลดเป็นไฟล์แรกเสมอ)
   ลำดับการโหลด: pat-tokens → pat-themes → pat-platform → pat-shell/pat-components/pat-motif
   แหล่งความจริง: brandbook/tokens/tokens.json  ·  ฐาน: แผ่น Key Theme v1.0

   โครง 3 ชั้น — ไล่ลงทางเดียว ห้ามย้อนขึ้นหรือข้ามชั้น
     1) primitive  สีดิบ/ขนาดดิบ  (--navy-700, --sp-4)          ← แอปห้ามเรียกตรง
     2) semantic   ความหมาย       (--surface-card, --ink-body)  ← แอปเรียกได้
     3) component  ชิ้นส่วน        (--sidepanel-w, --tree-row-h) ← แอปเรียกได้

   ⛔ กฎเหล็ก: หน้าแอปห้ามเขียนรหัสสีตรง (#xxxxxx) ทุกกรณี — ใช้ var() เท่านั้น
   ✅ ตัวแปรทุกตัวของ theme.css v0.3.1 ยังอยู่ครบในไฟล์นี้ (สัญญาความเข้ากันได้)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── 1) PRIMITIVE ─────────────────────────────────────────────────────── */
  --navy-900:#0d1f3c; --navy-800:#132a52; --navy-700:#1b3a6b; --navy-600:#244a86; --navy-500:#2f5da3;
  --gold-700:#9a7414; --gold-600:#b8901f; --gold-500:#c9a227; --gold-400:#dcb84e; --gold-300:#ecd488;
  --sky-600:#2f7fd1;  --sky-500:#4a90d9;  --sky-400:#6aa9e6;  --sky-300:#9cc7f0;  --sky-200:#cfe3f8;
  --ink-900:#10151f;  --ink-700:#28313f;  --ink-500:#55606f;  --ink-300:#8b96a5;
  --paper-0:#ffffff;  --paper-50:#f6f8fb; --paper-100:#eef2f7; --paper-200:#dbe3ee;
  --steel-600:#8b96a5; --steel-500:#9aa4b2; --steel-400:#b9c6d8; --steel-300:#c3cbd6;
  --success:#1f9d57; --warning:#e0a112; --danger:#d64545; --info:#2f7fd1;

  /* เฉดส่วนประกอบ (แผ่น Key Theme §03) — พื้นป้าย · ขอบป้าย · ตัวอักษร · พื้นแถว · แถบซ้าย 4px */
  --tint-gold-bg:#fbf3d9;    --tint-gold-bd:#e2c869;    --tint-gold-ink:#6b5310;    --tint-gold-row:#fdf9ec;
  --tint-sky-bg:#eaf3fc;     --tint-sky-bd:#a9cdf1;     --tint-sky-ink:#1b3a6b;     --tint-sky-row:#f7fbff;
  --tint-neutral-bg:#f1f4f8; --tint-neutral-bd:#dbe3ee; --tint-neutral-ink:#55606f; --tint-neutral-row:#ffffff;
  --tint-success-bg:#e9f6ee; --tint-success-bd:#a3d9ba; --tint-success-ink:#14663a; --tint-success-row:#fbfdfb;
  --tint-warning-bg:#fdf1e3; --tint-warning-bd:#f0cf96; --tint-warning-ink:#7a5307; --tint-warning-row:#fffaf3;
  --tint-danger-bg:#fdf3f3;  --tint-danger-bd:#eebcbc;  --tint-danger-ink:#962929;  --tint-danger-row:#fffbfb;

  /* ── 2) SEMANTIC ──────────────────────────────────────────────────────── */
  --brand-primary:var(--navy-700); --brand-primary-dark:var(--navy-900);
  --brand-accent:var(--gold-500);  --brand-secondary:var(--sky-500);
  --brand-accent-soft:var(--tint-gold-bg);

  --surface-app:var(--paper-50);      --surface-card:var(--paper-0);
  --surface-raised:var(--paper-100);  --surface-sunken:var(--paper-100);
  --surface-header:var(--navy-700);   --surface-header-ink:var(--paper-0);
  --surface-nav:var(--navy-900);      --surface-nav-ink:var(--sky-200);
  --surface-scrim:rgba(13,31,60,.46);

  --ink-strong:var(--ink-900); --ink-body:var(--ink-700); --ink-muted:var(--ink-500);
  --ink-on-brand:var(--paper-0); --ink-on-accent:var(--navy-900); --ink-disabled:var(--steel-500);
  --line:var(--paper-200); --line-soft:var(--paper-100); --line-strong:var(--steel-400);
  --focus:var(--sky-500); --focus-w:3px; --link:var(--navy-500);   /* แผ่น §01: navy 500 = ลิงก์ (7.4:1 บนขาว) */

  --status-success:var(--success); --status-warning:var(--warning);
  --status-danger:var(--danger);   --status-info:var(--info);

  /* ── คำศัพท์สถานะกลางของแพลตฟอร์ม (ทุกแอปใช้ชุดนี้ ห้ามคิดศัพท์สีใหม่รายแอป) ──
     ร่าง → รอดำเนินการ → กำลังดำเนินการ → รอตรวจ → อนุมัติ/เสร็จ  ·  แตกสาย: เลยกำหนด · ไม่อนุมัติ · ยกเลิก */
  --state-draft:var(--ink-300);      /* ร่าง — ยังไม่ส่ง */
  --state-pending:var(--sky-500);    /* รอดำเนินการ · ลำดับถัดไป */
  --state-active:var(--gold-500);    /* กำลังดำเนินการ — "จุดที่ต้องมองตอนนี้" (งบทองของหน้าจอ) */
  --state-review:var(--sky-600);     /* รอตรวจ/รออนุมัติ */
  --state-approved:var(--success);   /* อนุมัติแล้ว */
  --state-done:var(--success);       /* เสร็จสิ้น */
  --state-overdue:var(--warning);    /* เลยกำหนด */
  --state-rejected:var(--danger);    /* ไม่อนุมัติ · ตีกลับ */
  --state-cancelled:var(--ink-500);  /* ยกเลิก · ถอน */

  /* ตัวตนรายแอป — ⛔ ใช้ได้เฉพาะจุดระบุแอป ห้ามใช้เป็นสีปุ่ม/สถานะ (ดู pat-patterns.css ส่วน A) */
  --app-tint:var(--sky-500);

  /* คิววาระ (แอปเรียกคิว) — @alias ของศัพท์กลางข้างบน คงไว้เพื่อความเข้ากันได้ */
  --queue-current:var(--state-active); --queue-waiting:var(--state-pending); --queue-unmanaged:var(--ink-300);
  --queue-moved-up:var(--success); --queue-moved-down:var(--warning);

  /* ── 3) TYPOGRAPHY ────────────────────────────────────────────────────── */
  --font-thai:"Noto Sans Thai","Sarabun","TH Sarabun New",system-ui,sans-serif;
  --font-ui:var(--font-thai);
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  --font-doc:"TH SarabunIT๙","TH SarabunPSK","TH Sarabun New",serif;   /* เอกสารสารบรรณเท่านั้น */

  /* จอผู้ดูแล — ระยะมอง 50-70 ซม. · ⛔ 13px = พื้นล่างเด็ดขาด */
  --fs-label:13px;     --lh-label:1.4;
  --fs-secondary:14px; --lh-secondary:1.55;
  --fs-body:15px;      --lh-body:1.6;
  --fs-subhead:18px;   --lh-subhead:1.4;
  --fs-section:21px;   --lh-section:1.3;
  --fs-page:28px;      --lh-page:1.25;
  /* จอห้องประชุม — ระยะมอง 5-8 ม. (ใช้เฉพาะ data-theme="board") */
  --fs-board-next:40px; --fs-board-meta:56px; --fs-board-title:72px;
  --fs-board-no:96px;   --fs-board-clock:120px;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600;

  /* ── 4) SHAPE · SPACE · ELEVATION · MOTION · LAYER ────────────────────── */
  --radius-xs:4px; --radius-btn:6px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-8:48px; --sp-10:64px;
  --shadow-card:0 1px 3px rgba(13,31,60,.10),0 8px 24px rgba(13,31,60,.10);
  --shadow-raised:0 4px 16px rgba(13,31,60,.16);
  --shadow-overlay:0 24px 64px rgba(8,17,29,.34);
  --glow-gold:0 0 0 3px rgba(201,162,39,.35);
  --transition:160ms cubic-bezier(.4,0,.2,1);
  --transition-fast:120ms cubic-bezier(.4,0,.2,1);
  --transition-panel:220ms cubic-bezier(.2,0,0,1);
  --flash-ms:6000; --blink-ms:700;
  --z-sticky:100; --z-topbar:200; --z-scrim:400; --z-sidepanel:440; --z-modal:500; --z-toast:600; --z-tooltip:700;

  /* ── 5) COMPONENT ─────────────────────────────────────────────────────── */
  --topbar-h:56px;
  --topbar-bg:var(--surface-header); --topbar-ink:var(--surface-header-ink);
  --topbar-line:rgba(255,255,255,.10);

  --sidepanel-w:272px; --sidepanel-w-rail:72px; --sidepanel-w-now:var(--sidepanel-w);
  --sidepanel-bg:var(--surface-nav); --sidepanel-ink:var(--surface-nav-ink);
  --sidepanel-ink-active:var(--paper-0); --sidepanel-item-h:40px; --sidepanel-item-radius:8px;
  --sidepanel-hover:rgba(255,255,255,.07); --sidepanel-active:rgba(74,144,217,.20);

  --inspector-w:320px;
  --statusbar-h:28px;
  --content-max:1440px; --content-pad:24px;

  --tree-row-h:36px; --tree-indent:20px; --tree-chevron:16px;
  --tree-guide:rgba(139,150,165,.32); --tree-active-bg:var(--tint-sky-bg); --tree-active-ink:var(--brand-primary);

  --btn-fs:15px; --btn-pad:11px 22px; --btn-pad-outline:10px 21px;
  --btn-outline-bd:var(--steel-400);
  --btn-disabled-bg:var(--paper-100); --btn-disabled-ink:var(--steel-500); --btn-disabled-bd:var(--paper-200);
  --touch-min:44px;

  --badge-fs:14px; --badge-pad:6px 13px; --badge-dot:8px;
  --card-pad:16px;
  --table-head-bg:var(--paper-50); --table-divider:var(--paper-100); --table-row-pad:12px 16px;
  --field-h:40px; --field-pad-x:12px;
  --modal-max:560px;

  /* ── 6) EVENT (ชั้นตกแต่ง — ค่าเริ่มต้น "ไม่มีอีเวนต์") ─────────────────── */
  --event-strip:transparent; --event-strip-h:0px;
  --event-accent-decor:var(--brand-accent);
  --event-motif-opacity:1;
  --event-badge-display:none;
}

/* ── ตัวอักษรตัวเลขในระบบ: อารบิก + ความกว้างคงที่ (ตารางไม่เต้น) ───────── */
.pat-num, .pat-mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums lining-nums; }

/* ── @deprecated · คงไว้เพื่อความเข้ากันได้ ห้ามใช้ในงานใหม่ ─────────────── */
:root {
  --fs-xs:13px;   /* → ใช้ --fs-label */
  --fs-sm:14px;   /* → ใช้ --fs-secondary */
  --fs-base:15px; /* → ใช้ --fs-body */
  --fs-lg:18px;   /* → ใช้ --fs-subhead */
  --fs-xl:21px;   /* → ใช้ --fs-section */
  --fs-2xl:28px;  /* → ใช้ --fs-page */
  --fs-display:56px; /* → ใช้ --fs-board-meta */
}

/* ── สเกลตัวอักษรตามแผ่น Key Theme เป๊ะ (ทางเลือก) ───────────────────────────
   ค่าเริ่มต้นของระบบใช้สเกลผ่อน 28/21/18/15/14/13 (ทีมพัฒนาเลือกไว้เพื่อความหนาแน่นของตาราง)
   ถ้าต้องการกลับไปใช้สเกลตามแผ่นทุกตัว ให้ใส่ data-typescale="sheet" ที่ <html> — ไม่ต้องแก้หน้าแอป */
[data-typescale="sheet"] {
  --fs-label:13px;     --lh-label:1.4;
  --fs-secondary:15px; --lh-secondary:1.6;
  --fs-body:17px;      --lh-body:1.65;
  --fs-subhead:20px;   --lh-subhead:1.4;
  --fs-section:24px;   --lh-section:1.3;
  --fs-page:32px;      --lh-page:1.25;
}