/* ============================================================================
   7 QC Tools — tokens.css
   ระบบดีไซน์: Document Intelligence Studio (Modern SaaS light)
   สืบทอดตรงจาก ~/Claude/statistics/assets/css/style.css แล้วขยายสำหรับ SaaS chrome
   (ARCHITECTURE.md §9 เป็นข้อผูกมัด)
   ⚠️ 2026-09-16: ชั้นตกแต่งถูกทับด้วย styles/skin-blue.css (สกิน "ฟ้า" ของ qccprize.com —
   gradient · เงา · ยาปั้ม · มุมโค้งกว้างขึ้น) ไฟล์นี้ยังเป็นฐานที่ถูกต้องและเป็นสิ่งที่เหลือ
   อยู่ถ้าถอดคลาส qcc-blue ออกจาก body  ค่าที่ห้ามแตะยังอยู่ที่เดิม: สีชุดกราฟ · คู่สี
   semantic ของ badge · tabular-nums · body ≥13px  อ่าน §9 ก่อนแก้

   ไฟล์นี้เก็บเฉพาะ "คำศัพท์" ของระบบ: @font-face · ตัวแปร · reset · scrollbar ·
   prefers-reduced-motion  ไม่มี selector ของ component ใด ๆ (อยู่ components.css)
   ============================================================================ */

/* ---------------------------------------------------------------------------
   ฟอนต์ — self-host ทั้งหมด ไม่มี CDN ไม่มี Google Fonts
   เหตุผล: อินทราเน็ตโรงงานบล็อก fonts.googleapis.com เป็นปกติ ถ้าพึ่ง CDN
   หน้าจอในไลน์ผลิตจะกลายเป็นฟอนต์ระบบที่ metrics ไม่ตรง แล้ว layout เพี้ยนทั้งแอป
   Inter / JetBrains Mono = OFL, subset เฉพาะละติน+กรีก+สัญลักษณ์คณิตศาสตร์
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/JetBrainsMono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/JetBrainsMono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* หน้าไทย: Sarabun (OFL) — subset เฉพาะบล็อกไทย ไฟล์ละ ~9.8KB
   unicode-range ทำให้เบราว์เซอร์ดาวน์โหลดก็ต่อเมื่อหน้านั้นมีอักษรไทยจริง และทำให้
   ตัวเลข/ละตินยังเป็น Inter ตามเดิม (เมตริกไม่เพี้ยน ตาราง tabular-nums ไม่ขยับ)
   family จะถูก "อ้างถึง" ก็ต่อเมื่อ app.js probe แล้วพบไฟล์จริง (ตั้ง html[data-fonts="thai"])
   น้ำหนักที่มีคือ 400/600/700 — ข้อความ weight 500 จะถอยไปใช้ 400 ตามกติกาจับคู่ฟอนต์ของ CSS */
@font-face {
  font-family: 'Sarabun';
  src: url('../assets/fonts/Sarabun-Thai-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0E01-0E5B, U+200B-200D, U+25CC;
}
@font-face {
  font-family: 'Sarabun';
  src: url('../assets/fonts/Sarabun-Thai-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0E01-0E5B, U+200B-200D, U+25CC;
}
@font-face {
  font-family: 'Sarabun';
  src: url('../assets/fonts/Sarabun-Thai-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0E01-0E5B, U+200B-200D, U+25CC;
}

/* ---------------------------------------------------------------------------
   ตัวแปรระบบ
   --------------------------------------------------------------------------- */
:root {
  /* พื้นผิวและเส้น — ยกมาจากต้นทางทั้งชุด ค่าเดียวกันเป๊ะเพื่อให้สองแอปดูเป็นตระกูลเดียวกัน */
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --surface-3: #e9ebef;
  --border: #e2e5ea;
  --border-strong: #d3d7de;

  --text: #1a1d21;
  --text-2: #6b7280;
  --text-3: #9aa1ab;

  --primary: #007aff;
  --primary-hover: #0a6ae6;
  --primary-active: #085ecb;
  --primary-soft: #e8f1fd;
  --primary-line: #cfe3fb;

  --danger: #d92d20;
  --danger-soft: #fef1f0;
  --danger-line: #f6cfcb;
  --ok: #12805c;
  --ok-soft: #e8f6f1;
  --ok-line: #c2e5d8;
  --warn: #b45309;
  --warn-soft: #fdf4e7;
  --warn-line: #f1dfc0;

  /* โฟกัส — เส้นเดียวใช้ทั้งแอป จะได้ไม่ต้องไล่แก้ทีละ component */
  --focus-ring: 0 0 0 3px rgba(0, 122, 255, 0.14);

  /* รัศมี — แน่น 6/8/10 ตาม §9 ไม่มี pill ยกเว้นจุดวงกลมล้วน */
  --r-sm: 5px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 10px;

  /* เงา — ใช้เฉพาะของที่ "ลอย" จริง (dropdown/dialog/toast) โครงสร้างใช้เส้น ไม่ใช่เงา */
  --shadow-pop: 0 8px 24px rgba(26, 29, 33, 0.10);
  --shadow-dialog: 0 16px 48px rgba(26, 29, 33, 0.14);

  /* ระยะห่าง */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 10px;
  --sp-5: 12px;
  --sp-6: 14px;
  --sp-7: 18px;
  --sp-8: 24px;

  /* ฟอนต์ — Sarabun ที่ฝังมาเองยังไม่ถูกอ้างถึงจนกว่า probe จะสำเร็จ (ดูบล็อก data-fonts ล่าง)
     ลำดับ fallback ไทยครอบทั้ง macOS (Thonburi) · Windows (Leelawadee UI/Tahoma) · Linux (Noto Sans Thai) */
  --font-th-stack: 'Noto Sans Thai', 'Leelawadee UI', 'Thonburi', Tahoma;
  --font: 'Inter', var(--font-th-stack), -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ขนาดตัวอักษร — ค่าฐานคือหน้าอังกฤษ (มี override สำหรับไทยด้านล่าง)
     กติกา §9: body ไม่เล็กกว่า 13px  →  --fs-body เป็นพื้นล่างของ "ข้อความ" ทุกชนิด */
  --fs-body: 13px;
  --fs-label: 12.5px;   /* label ของฟิลด์ */
  --fs-cap: 12px;       /* คำบรรยายรอง */
  --fs-badge: 11.5px;   /* badge / chip */
  --fs-kicker: 11px;    /* หัวกลุ่มตัวพิมพ์ใหญ่ letterspaced */
  --fs-lg: 14px;
  --fs-xl: 15px;
  --fs-2xl: 18px;
  --fs-num-xs: 11px;    /* เฉพาะตัวเลขล้วน (เลขแถว, ref คอลัมน์) — ไม่มีวันเป็นภาษาไทย */

  --lh-body: 1.45;
  --lh-tight: 1.3;

  /* จังหวะเคลื่อนไหว — เบามาก แค่พอบอกว่า "ระบบรับรู้แล้ว" */
  --t: 120ms ease;
  --t-slow: 200ms ease;

  /* ชั้นซ้อน */
  --z-rail-scrim: 400;
  --z-rail-drawer: 410;
  --z-pop: 500;
  --z-dialog: 1000;
  --z-toast: 1200;

  /* ขนาดโครงหน้า — app.css อ่านค่าจากตรงนี้ที่เดียว */
  --h-topbar: 46px;
  --w-rail: 214px;
  --w-rail-collapsed: 52px;
  --w-params: 296px;
  --w-results: 324px;

  color-scheme: light;
}

/* ไทยต้องอ่านง่ายกว่านี้: ดันทุกขนาดที่ต่ำกว่า 13px ขึ้นมาที่ 13px และเพิ่ม line-height
   ให้สระบน/ล่างไม่ชนกัน (ARCHITECTURE §9 + กติกาข้อ 6 ของโปรเจกต์)
   --fs-num-xs ไม่ถูกดัน เพราะใช้กับตัวเลขล้วนเท่านั้น */
:root[lang='th'] {
  --fs-label: 13px;
  --fs-cap: 13px;
  --fs-badge: 13px;
  --fs-kicker: 13px;
  --lh-body: 1.6;
  --lh-tight: 1.4;
}

/* ฟอนต์ไทยมาแล้ว — เติม Sarabun (ฝังในรีโป) ไว้หน้าสุดของสแตกไทย
   app.js ตั้งค่านี้ให้หลัง probe ไฟล์สำเร็จเท่านั้น */
:root[data-fonts='thai'] {
  --font-th-stack: 'Sarabun', 'Noto Sans Thai', 'Leelawadee UI', 'Thonburi', Tahoma;
}

/* ---------------------------------------------------------------------------
   ฟอนต์ CJK — ใช้ของที่ติดมากับเครื่อง ไม่ฝังในรีโป

   ทำไมไม่ฝังแบบที่ทำกับ Sarabun: ฟอนต์จีน/ญี่ปุ่นเต็มชุดใหญ่ 5-16MB ต่อน้ำหนัก
   (Sarabun subset ไทยแค่ 9.8KB) แม้ subset เฉพาะอักษรที่ใช้บ่อยก็ยังราว 1-2MB
   ซึ่งเกินกว่าจะยอมให้ผู้ใช้โหลดเพื่อเปิดหน้าจอแรก  ทุกเครื่องที่แสดงภาษาจีน/ญี่ปุ่นได้
   มีฟอนต์ CJK คุณภาพดีติดมาอยู่แล้ว (macOS: Hiragino/PingFang · Windows: Yu Gothic/
   Microsoft YaHei · Android/ChromeOS: Noto CJK) การพึ่งฟอนต์ระบบจึงเป็นวิธีมาตรฐาน
   ของงานพิมพ์ CJK บนเว็บ ไม่ใช่การลัด

   Inter ยังอยู่หน้าสุดเสมอ เพื่อให้ตัวเลขและอักษรละตินคงเมตริกเดิม —
   ตาราง tabular-nums จึงไม่ขยับตอนสลับภาษา (เหมือนที่ทำกับไทย)
   --------------------------------------------------------------------------- */
:root[data-cjk='ja'] {
  --font: 'Inter', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic Medium', 'Yu Gothic',
          'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', var(--font-th-stack),
          -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
:root[data-cjk='zh'] {
  --font: 'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Source Han Sans SC',
          'Noto Sans SC', 'Noto Sans CJK SC', 'Heiti SC', var(--font-th-stack),
          -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* CJK ไม่มีช่องว่างระหว่างคำ เบราว์เซอร์จึงตัดบรรทัดที่ไหนก็ได้ — บังคับให้ตัดตามกฎ
   คินโซกุ (ห้ามขึ้นบรรทัดใหม่ด้วยวรรคตอนปิด) และเพิ่มความสูงบรรทัดเล็กน้อย
   เพราะตัวอักษรจีน/ญี่ปุ่นเต็มช่องกว่าละติน อ่านติดกันแล้วอึดอัด */
:root[data-cjk] body { line-height: 1.7; word-break: normal; line-break: strict; overflow-wrap: anywhere; }
:root[data-cjk] .man-p,
:root[data-cjk] .man-list li,
:root[data-cjk] .man-pairs dd,
:root[data-cjk] .man-step-do { line-height: 1.8; }

/* ---------------------------------------------------------------------------
   reset
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
  overflow: hidden;           /* แอปคุมการเลื่อนเองทีละ pane */
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
button { background: none; border: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
img { max-width: 100%; }
table { border-collapse: collapse; }

/* ตัวเลขต้องเรียงตรงคอลัมน์เสมอ — §9 */
.tnum, input[inputmode='decimal'], .qc-num { font-variant-numeric: tabular-nums; }

/* โฟกัสที่มองเห็นได้ ต้องมีทุกที่ที่กด tab ถึง */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-radius: var(--r-sm);
}

/* scrollbar บาง ๆ ให้เข้ากับ hairline */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #d5d9df; border-radius: 5px;
  border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #bfc5cd; background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

::selection { background: var(--primary-soft); }

/* ---------------------------------------------------------------------------
   ผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหว — §9 บังคับ ต้องครอบทุก animation ไม่ใช่บางตัว
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}