/*!
 * inventory-tokens.css: the ONLY place colour / size / spacing values live (P0-14, rewritten for P1-20/ADR 0028).
 *
 * Verbatim copy of the CSS part of Docs/ui/_tokens.scss (the :root block + the three theme blocks), which is
 * itself identical to the tokens of Docs/ui/styleguide.html. Plain CSS custom properties, no compile step.
 * tests/Inventory/Unit/Ui/DesignTokensTest.php fails if this file drifts from _tokens.scss or the styleguide:
 * change Docs/ui first, then copy it here.
 *
 * Themes (Docs/ui/styleguide.html switcher): light = default · dark = data-theme="dark" or the OS dark
 * preference when no theme is chosen · warehouse = data-theme="warehouse" (high contrast, bigger type, 48px
 * controls for store phones). Set by Assets/js/inventory-theme.js.
 *
 * Bootstrap 5.3.8 is mapped onto these tokens in inventory.css (never edit Bootstrap itself).
 */
:root{
  /* brand — indigo (ตระกูลเดียวกับ HR: ทั้งสองผลิตภัณฑ์ต้องดูเป็นบ้านเดียวกัน) */
  --c-brand-050:#EEF2FF; --c-brand-100:#E0E7FF; --c-brand-200:#C7D2FE; --c-brand-300:#A5B4FC;
  --c-brand-400:#818CF8; --c-brand-500:#6366F1; --c-brand-600:#4F46E5; --c-brand-700:#4338CA;
  --c-brand-800:#3730A3; --c-brand-900:#312E81;
  /* accent — teal: ใช้กับ "ของเข้า/ของพอ/ยืนยันเชิงบวกของสต็อก" ห้ามใช้เป็นปุ่มหลักของหน้า */
  --c-teal-050:#F0FDFA; --c-teal-100:#CCFBF1; --c-teal-500:#14B8A6; --c-teal-600:#0D9488; --c-teal-700:#0F766E;
  /* amber — "กำลังถูกใช้งาน/ต้องสนใจ" (st-picked, highlight) */
  --c-amber-100:#FEF3C7; --c-amber-500:#F59E0B; --c-amber-600:#B45309;
  /* neutral — เทาอมอุ่น ไม่ใช่เทาเย็นแบบ bootstrap */
  --c-n-000:#FFFFFF; --c-n-025:#FCFBFA; --c-n-050:#F7F6F4; --c-n-100:#ECEAE7;
  --c-n-200:#DCD9D5; --c-n-400:#A6A09A; --c-n-600:#736E68; --c-n-700:#55504B;
  --c-n-800:#302C29; --c-n-900:#1B1917;
  /* semantic — emerald / amber / rose / sky · ทุกตัวมี -bg (พื้นอ่อน) และ -fg (ตัวอักษรบนพื้นอ่อน) */
  --c-ok:#059669; --c-ok-bg:#E8F8F1; --c-ok-fg:#065F46;
  --c-warn:#B45309; --c-warn-bg:#FDF3DC; --c-warn-fg:#92400E;
  --c-err:#E11D48; --c-err-bg:#FDECEF; --c-err-fg:#9F1239;
  --c-info:#0284C7; --c-info-bg:#E6F3FC; --c-info-fg:#075985;
  /* -ink = ตัวอักษรบนพื้นทึบของสีนั้น (คู่กับ --primary-ink / --accent-ink) — P2-15: เลือกฝั่งที่ผ่าน AA ของแต่ละธีม */
  --c-ok-ink:var(--c-n-900); --c-warn-ink:var(--c-n-000); --c-err-ink:var(--c-n-000);
  /* surface */
  --bg:var(--c-n-050); --surface:var(--c-n-000); --surface-2:var(--c-n-025);
  --line:#E8E6E3; --line-strong:#D5D2CE;
  --ink:var(--c-n-900); --ink-2:var(--c-n-700); --ink-3:var(--c-n-600);
  --primary:var(--c-brand-600); --primary-hover:var(--c-brand-700); --primary-ink:#FFFFFF;
  --primary-soft:var(--c-brand-050); --primary-soft-ink:var(--c-brand-700);
  --accent:var(--c-teal-600); --accent-ink:#FFFFFF; --accent-soft:var(--c-teal-050); --accent-soft-ink:var(--c-teal-700);
  --focus:var(--c-brand-500);
  /* type — 12 / 14 / 16 / 18 / 22 / 28 / 36 */
  --f-sans:"Sarabun","IBM Plex Sans Thai",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --t-xs:12px; --t-sm:14px; --t-md:16px; --t-lg:18px; --t-xl:22px; --t-2xl:28px; --t-3xl:36px;
  --lh-body:1.6; --lh-head:1.5;                 /* ไทยต่ำกว่า 1.5 ไม่ได้ วรรณยุกต์ชนกัน */
  /* space (4pt) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  /* shape — control 8 · card 12 · pill 999 */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(27,25,23,.05), 0 1px 1px rgba(27,25,23,.04);
  --sh-2:0 2px 4px rgba(27,25,23,.05), 0 6px 16px rgba(27,25,23,.07);
  --sh-3:0 2px 6px rgba(27,25,23,.06), 0 12px 32px rgba(27,25,23,.11);
  /* density */
  --row-h:44px; --row-h-touch:56px; --tap:48px; --control-h:40px;
  --side-w:15rem; --side-w-mini:4.5rem; --hdr-h:3.5rem;
  --dur:160ms;
}
:root:not([data-theme="light"]) { }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]):not([data-theme="warehouse"]){
  --bg:#020617; --surface:#0F172A; --surface-2:#1E293B; --line:#1E293B; --line-strong:#334155;
  --ink:#E2E8F0; --ink-2:#CBD5E1; --ink-3:#94A3B8;
  --primary:#818CF8; --primary-hover:#A5B4FC; --primary-ink:#0B1020;
  --primary-soft:#1E1B4B; --primary-soft-ink:#C7D2FE;
  --accent:#2DD4BF; --accent-ink:#042F2E; --accent-soft:#0F2E2C; --accent-soft-ink:#5EEAD4;
  --focus:#A5B4FC;
  --c-ok:#34D399; --c-ok-bg:#06281D; --c-ok-fg:#6EE7B7;
  --c-warn:#FBBF24; --c-warn-bg:#2C2008; --c-warn-fg:#FCD34D;
  --c-err:#FB7185; --c-err-bg:#2E1117; --c-err-fg:#FDA4AF;
  --c-info:#38BDF8; --c-info-bg:#082234; --c-info-fg:#7DD3FC;
  --c-warn-ink:var(--c-n-900); --c-err-ink:var(--c-n-900);
  --c-brand-100:#1E1B4B; --c-brand-700:#C7D2FE; --c-amber-100:#2C2008; --c-amber-600:#FCD34D;
  --c-n-100:#1E293B; --c-n-600:#94A3B8; --c-n-700:#CBD5E1; --c-n-800:#E2E8F0;
  --sh-1:0 1px 2px rgba(0,0,0,.5); --sh-2:0 4px 14px rgba(0,0,0,.55); --sh-3:0 12px 32px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  --bg:#020617; --surface:#0F172A; --surface-2:#1E293B; --line:#1E293B; --line-strong:#334155;
  --ink:#E2E8F0; --ink-2:#CBD5E1; --ink-3:#94A3B8;
  --primary:#818CF8; --primary-hover:#A5B4FC; --primary-ink:#0B1020;
  --primary-soft:#1E1B4B; --primary-soft-ink:#C7D2FE;
  --accent:#2DD4BF; --accent-ink:#042F2E; --accent-soft:#0F2E2C; --accent-soft-ink:#5EEAD4;
  --focus:#A5B4FC;
  --c-ok:#34D399; --c-ok-bg:#06281D; --c-ok-fg:#6EE7B7;
  --c-warn:#FBBF24; --c-warn-bg:#2C2008; --c-warn-fg:#FCD34D;
  --c-err:#FB7185; --c-err-bg:#2E1117; --c-err-fg:#FDA4AF;
  --c-info:#38BDF8; --c-info-bg:#082234; --c-info-fg:#7DD3FC;
  --c-warn-ink:var(--c-n-900); --c-err-ink:var(--c-n-900);
  --c-brand-100:#1E1B4B; --c-brand-700:#C7D2FE; --c-amber-100:#2C2008; --c-amber-600:#FCD34D;
  --c-n-100:#1E293B; --c-n-600:#94A3B8; --c-n-700:#CBD5E1; --c-n-800:#E2E8F0;
  --sh-1:0 1px 2px rgba(0,0,0,.5); --sh-2:0 4px 14px rgba(0,0,0,.55); --sh-3:0 12px 32px rgba(0,0,0,.6);
}
/* โหมดโกดัง: คอนทราสต์สูง ตัวใหญ่ ปุ่ม 48px — ใช้บนมือถือกลางแสงจ้าหรือในคลังที่มืด */
:root[data-theme="warehouse"]{
  --bg:#000000; --surface:#0B0B0D; --surface-2:#17171B; --line:#3A3A42; --line-strong:#5B5B65;
  --ink:#FFFFFF; --ink-2:#E7E7EC; --ink-3:#BFBFC8;
  --primary:#A5B4FC; --primary-hover:#C7D2FE; --primary-ink:#0A0A1F;
  --primary-soft:#1D1D42; --primary-soft-ink:#C7D2FE;
  --accent:#2DD4BF; --accent-ink:#00201D; --accent-soft:#0D2E2B; --accent-soft-ink:#5EEAD4;
  --focus:#C7D2FE;
  --c-ok:#34D399; --c-ok-bg:#05271C; --c-ok-fg:#6EE7B7;
  --c-warn:#FFC53D; --c-warn-bg:#2E2000; --c-warn-fg:#FFD978;
  --c-err:#FF6B81; --c-err-bg:#30101A; --c-err-fg:#FF9DAC;
  --c-info:#4CC2FF; --c-info-bg:#00223A; --c-info-fg:#8AD6FF;
  --c-warn-ink:var(--c-n-900); --c-err-ink:var(--c-n-900);
  --c-brand-100:#1D1D42; --c-brand-700:#C7D2FE; --c-amber-100:#2E2000; --c-amber-600:#FFD978;
  --c-n-100:#17171B; --c-n-600:#BFBFC8; --c-n-700:#E7E7EC; --c-n-800:#FFFFFF;
  --t-sm:16px; --t-md:18px; --t-lg:20px; --t-xl:24px; --t-2xl:30px; --t-3xl:38px;
  --row-h:56px; --control-h:48px;
  --sh-1:0 1px 2px rgba(0,0,0,.6); --sh-2:0 4px 14px rgba(0,0,0,.65); --sh-3:0 12px 32px rgba(0,0,0,.7);
}