/* ============================================================
   VASAP Design System — Tokens
   ISA-101 industrial, token-driven. No hardcoded colors in components.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');

:root {
  /* Typography */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   20px;
  --fs-2xl:  28px;
  --fs-3xl:  40px;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

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

  /* Radii */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* Z-index */
  --z-header:  100;
  --z-sidebar: 90;
  --z-modal:   200;
  --z-toast:   300;

  /* Motion */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --easing: cubic-bezier(0.2, 0, 0.2, 1);
}

/* ===== Light theme (management — default) ===== */
:root,
[data-theme="light"] {
  /* Surfaces */
  --bg:             #f3f5f7;
  --surface:        #ffffff;
  --surface-sunken: #eceff3;
  --surface-hover:  #f6f8fa;

  /* Text */
  --text:          #1a1f2b;
  --text-2:        #4a5365;
  --text-3:        #6b7382;
  --text-disabled: #aab1bc;
  --text-on-primary: #ffffff;

  /* Borders */
  --border:        #d8dde4;
  --border-strong: #b8c0cb;
  --border-focus:  var(--primary);

  /* Brand / primary (single industrial neutral — navy) */
  --primary:       #1c3d5a;
  --primary-hover: #173049;
  --primary-soft:  #e6ecf2;
  --primary-fg:    #ffffff;

  /* ISA-101 status hierarchy */
  --st-ok:        #1f8f4a;
  --st-ok-soft:   #e3f4ea;
  --st-info:      #2563eb;
  --st-info-soft: #e3edfd;
  --st-warn:      #d97706;
  --st-warn-soft: #fdf1dc;
  --st-degraded:  #ea580c;
  --st-degraded-soft: #fde6d4;
  --st-crit:      #c1272d;        /* RESERVED — stop / emergency / failure */
  --st-crit-soft: #f9dcdd;
  --st-offline:   #6b7280;
  --st-offline-soft: #e5e7eb;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 22, 36, 0.06);
  --shadow-md: 0 2px 8px rgba(15, 22, 36, 0.08);
  --shadow-lg: 0 8px 24px rgba(15, 22, 36, 0.12);

  color-scheme: light;
}

/* ===== Dark theme (control-room / operational dashboards) ===== */
[data-theme="dark"] {
  --bg:             #0f1419;
  --surface:        #1a2028;
  --surface-sunken: #0a0e12;
  --surface-hover:  #232a35;

  --text:          #e6ebf1;
  --text-2:        #b6bdc8;
  --text-3:        #8a93a0;
  --text-disabled: #5a6270;
  --text-on-primary: #ffffff;

  --border:        #2a323d;
  --border-strong: #3d4654;

  --primary:       #4a8bc7;
  --primary-hover: #5fa1de;
  --primary-soft:  #1c2d3f;

  --st-ok:        #2fb866;
  --st-ok-soft:   #143626;
  --st-info:      #4a8bc7;
  --st-info-soft: #142836;
  --st-warn:      #f0a93a;
  --st-warn-soft: #3a2a10;
  --st-degraded:  #f08838;
  --st-degraded-soft: #3a2110;
  --st-crit:      #e34c4c;
  --st-crit-soft: #3a1414;
  --st-offline:   #6b7280;
  --st-offline-soft: #1f242c;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}

/* ===== Density ===== */
:root,
[data-density="compact"] {
  /* desktop management screens */
  --row-h:        30px;
  --control-h:    28px;
  --btn-h:        30px;
  --btn-h-sm:     24px;
  --pad-x:        12px;
  --pad-y:        6px;
  --gap:          var(--sp-3);
  --tap-min:      28px;
}

[data-density="comfortable"] {
  /* shop-floor touch screens — 44px+ targets */
  --row-h:     52px;
  --control-h: 48px;
  --btn-h:     48px;
  --btn-h-sm:  40px;
  --pad-x:     16px;
  --pad-y:     12px;
  --gap:       var(--sp-4);
  --tap-min:   44px;
}

/* ===== Global resets / base ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.45;
  min-height: 100vh;
}

/* Numeric utility — always tabular */
.num,
.tabular {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}

/* Material Symbols base */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  user-select: none;
  vertical-align: middle;
}

/* Focus ring — never use color alone */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Selection */
::selection {
  background: var(--primary-soft);
  color: var(--text);
}

/* Scrollbars (subtle, theme-aware) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}