/* NS Industrial · Tanks — design tokens (single source for light and dark) */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  /* color · shell */
  --ns-shell: #0A1B2E;
  --ns-shell-2: #12283F;
  --ns-shell-text: #B9C6D4;
  --ns-shell-muted: #7D8FA3;
  --ns-shell-line: #1B3149;
  --ns-shell-strong: #FFFFFF;

  /* color · brand (public/icons/logo.svg) */
  --ns-brand-navy: #003366;
  --ns-brand-cyan: #00D4FF;
  --ns-brand-tile: #FFFFFF;

  /* color · surfaces and text */
  --ns-canvas: #F2F4F7;
  --ns-surface: #FFFFFF;
  --ns-surface-2: #F7F9FB;
  --ns-hover: #F1F5F9;
  --ns-line: #E3E8EE;
  --ns-line-strong: #CBD3DD;
  --ns-text: #0F1D2B;
  --ns-text-2: #3E4F61;
  --ns-muted: #66778A;
  --ns-faint: #98A5B4;
  --ns-on-accent: #FFFFFF;

  /* color · action */
  --ns-primary: #0B63CE;
  --ns-primary-hover: #0A55B0;
  --ns-primary-soft: #E9F1FC;
  --ns-primary-line: #A9C8F0;

  /* color · status (solid / soft background / line) */
  --ns-ok: #1E8452;      --ns-ok-soft: #E7F4EC;      --ns-ok-line: #B7DEC7;
  --ns-warn: #A86100;    --ns-warn-soft: #FFF4E0;    --ns-warn-line: #F2CF91;
  --ns-danger: #C8322B;  --ns-danger-soft: #FDECEA;  --ns-danger-line: #F2B8B3;
  --ns-data: #6E50B8;    --ns-data-soft: #F1ECFA;    --ns-data-line: #D3C6EF;
  --ns-maint: #56687A;   --ns-maint-soft: #EDF1F5;   --ns-maint-line: #CBD5DF;

  /* color · charts (identical in both themes) */
  --ns-series-1: #4A86E8;
  --ns-series-2: #C8772A;
  --ns-series-3: #23A094;
  --ns-series-4: #A97BE0;
  --ns-series-neutral: #8A97A6;

  /* color · material fluid fallback (TanksWorkspace.fluidColor) */
  --ns-fluid-oil: #D5A23D;
  --ns-fluid-water: #55AFC7;
  --ns-fluid-glycol: #4BA891;
  --ns-fluid-default: #5BA9BD;
  --ns-mimic-plate: #EEF2F5;

  /* color · map */
  --ns-map-ground: #E9ECEF;
  --ns-map-tile-filter: grayscale(1) contrast(.92) brightness(1.04);

  /* typography */
  --ns-font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --ns-font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --ns-fs-title: 20px;    --ns-lh-title: 28px;
  --ns-fs-kpi: 22px;      --ns-lh-kpi: 28px;
  --ns-fs-h2: 14px;       --ns-lh-h2: 20px;
  --ns-fs-h3: 13px;       --ns-lh-h3: 18px;
  --ns-fs-body: 13px;     --ns-lh-body: 20px;
  --ns-fs-table: 12px;    --ns-lh-table: 16px;
  --ns-fs-label: 12px;
  --ns-fs-caption: 11px;  --ns-lh-caption: 14px;
  --ns-fs-overline: 11px; --ns-ls-overline: .06em;
  --ns-fw-regular: 400;
  --ns-fw-medium: 500;
  --ns-fw-semibold: 600;

  /* spacing (base 4) */
  --ns-space-1: 2px;
  --ns-space-2: 4px;
  --ns-space-3: 6px;
  --ns-space-4: 8px;
  --ns-space-5: 12px;
  --ns-space-6: 16px;
  --ns-space-7: 20px;
  --ns-space-8: 24px;
  --ns-space-9: 32px;

  /* sizes */
  --ns-sidebar-w: 232px;
  --ns-topbar-h: 56px;
  --ns-control-h: 32px;
  --ns-control-h-sm: 28px;
  --ns-row-h: 36px;
  --ns-row-h-dense: 32px;
  --ns-thead-h: 32px;
  --ns-ctxbar-h: 48px;
  --ns-drawer-w: clamp(420px, 34vw, 560px);
  --ns-modal-sm: 480px;
  --ns-modal-md: 640px;
  --ns-modal-lg: 880px;
  --ns-modal-xl: 1120px;
  --ns-content-max: 1680px;

  /* radius */
  --ns-r-xs: 3px;
  --ns-r-sm: 4px;
  --ns-r-md: 6px;
  --ns-r-lg: 8px;
  --ns-r-pill: 999px;

  /* elevation */
  --ns-shadow-pop: 0 6px 20px rgba(15, 29, 43, .12);
  --ns-shadow-drawer: -10px 0 28px rgba(15, 29, 43, .14);
  --ns-shadow-modal: 0 24px 56px rgba(15, 29, 43, .24);
  --ns-backdrop: rgba(10, 27, 46, .48);
  --ns-focus-ring: 0 0 0 3px rgba(11, 99, 206, .28);
  --ns-float-bg: rgba(255, 255, 255, .94);

  /* layers */
  --ns-z-sticky: 10;
  --ns-z-menu: 1000;
  --ns-z-drawer: 1100;
  --ns-z-modal: 1200;
  --ns-z-toast: 1300;
  --ns-z-scope: 2100;

  /* motion */
  --ns-t-fast: 120ms ease-out;
  --ns-t-panel: 180ms ease-out;

  /* breakpoints (documented; used literally in media queries): 1440 · 1280 · 1024 · 768 */
  color-scheme: light;
}

:root[data-theme="dark"] {
  --ns-shell: #070F1A;
  --ns-shell-2: #0E1A2A;
  --ns-shell-text: #A6B4C3;
  --ns-shell-muted: #6B7C8F;
  --ns-shell-line: #152335;
  --ns-canvas: #0C1522;
  --ns-surface: #121D2C;
  --ns-surface-2: #172434;
  --ns-hover: #1B2A3C;
  --ns-line: #233246;
  --ns-line-strong: #2F4159;
  --ns-text: #E5EBF2;
  --ns-text-2: #B3C0CE;
  --ns-muted: #8797A9;
  --ns-faint: #5D6D80;
  --ns-primary: #3D8BF0;
  --ns-primary-hover: #5C9EF3;
  --ns-primary-soft: #14294A;
  --ns-primary-line: #2A4A78;
  --ns-ok: #3DB97A;      --ns-ok-soft: #12301F;      --ns-ok-line: #1E5236;
  --ns-warn: #E3A23B;    --ns-warn-soft: #33260F;    --ns-warn-line: #5C4417;
  --ns-danger: #EE6A60;  --ns-danger-soft: #3A1A1A;  --ns-danger-line: #6B2A26;
  --ns-data: #A58BE6;    --ns-data-soft: #251E3C;    --ns-data-line: #44376E;
  --ns-maint: #8FA0B2;   --ns-maint-soft: #1B2735;   --ns-maint-line: #33445A;
  --ns-map-ground: #16212E;
  --ns-map-tile-filter: grayscale(1) invert(.9) contrast(.85) brightness(.9);
  --ns-shadow-pop: 0 6px 20px rgba(0, 0, 0, .45);
  --ns-shadow-drawer: -10px 0 28px rgba(0, 0, 0, .5);
  --ns-shadow-modal: 0 24px 56px rgba(0, 0, 0, .6);
  --ns-backdrop: rgba(2, 6, 12, .62);
  --ns-focus-ring: 0 0 0 3px rgba(61, 139, 240, .40);
  --ns-float-bg: rgba(18, 29, 44, .92);
  color-scheme: dark;
}