/* ============================================================
   Design Tokens — Enterprise Industrial SaaS
   SAP Fiori + Microsoft Fluent + Modern QMS/MES
   ============================================================ */

:root {
  /* ---- Brand / Corporate Blue ---- */
  --brand: #0A6ED1;
  --brand-hover: #085CAF;
  --brand-active: #0A4F8F;
  --brand-subtle: #EAF3FB;
  --brand-border: #B3D4F0;

  /* ---- Neutral surfaces (white / light gray) ---- */
  --bg-app: #F5F6F7;
  --bg-canvas: #EDEFF1;
  --surface: #FFFFFF;
  --surface-2: #FBFBFC;
  --surface-raised: #FFFFFF;

  /* ---- Borders / lines (thin) ---- */
  --border: #E1E4E8;
  --border-strong: #D0D5DB;
  --border-focus: #0A6ED1;

  /* ---- Text ---- */
  --text: #32363A;          /* Fiori primary text */
  --text-secondary: #6A6D70;
  --text-muted: #8C8F94;
  --text-inverse: #FFFFFF;
  --text-link: #0A6ED1;

  /* ---- Semantic (Fiori palette) ---- */
  --positive: #107E3E;
  --positive-bg: #E6F3EC;
  --warning: #E9730C;
  --warning-bg: #FCF0E3;
  --negative: #BB0000;
  --negative-bg: #FBE9E9;
  --info: #0A6ED1;
  --info-bg: #EAF3FB;
  --neutral: #6A6D70;
  --neutral-bg: #EEF0F2;

  /* ---- Radius (8-10px) ---- */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ---- Soft shadows ---- */
  --shadow-xs: 0 1px 2px rgba(27, 41, 61, 0.05);
  --shadow-sm: 0 1px 3px rgba(27, 41, 61, 0.06), 0 1px 2px rgba(27, 41, 61, 0.04);
  --shadow-md: 0 2px 8px rgba(27, 41, 61, 0.08), 0 1px 2px rgba(27, 41, 61, 0.04);
  --shadow-lg: 0 8px 24px rgba(27, 41, 61, 0.12);
  --shadow-focus: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--brand);

  /* ---- Typography ---- */
  --font-sans: "Noto Sans Thai", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "Cascadia Mono", ui-monospace, monospace;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;

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

  --lh-tight: 1.25;
  --lh-normal: 1.5;

  /* ---- Spacing (4px scale) ---- */
  --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;

  /* ---- Layout ---- */
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 64px;
  --header-h: 56px;
  --content-max: 1280px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 180ms;

  --z-header: 100;
  --z-sidebar: 90;
  --z-overlay: 500;
  --z-modal: 600;
  --z-toast: 700;
}