/* ==========================================================================
   MedSupply National Platform
   Ministry of Health, State of Libya  ·  Medical Supply Authority
   Delivered by NSR International IT Company
   --------------------------------------------------------------------------
   tokens.css : colour, type, spacing, elevation and motion primitives.
   Every value used anywhere in the product is declared once, here.

   Design intent, second revision.
   The first build put dark navy on the top bar, a second navy module bar
   and a navy sidebar. Three dark bands around every screen made the
   product feel heavy and dated. This revision keeps the chrome light and
   quiet, spends colour only where it carries meaning, and leans on one
   pixel borders rather than shadows. Navy is now an accent, not a field.
   ========================================================================== */

:root {
  /* ---- Brand ----------------------------------------------------------
     Kept for identity: the mark, active states, the signature accent.
     Never used as a large flat background any more. */
  --nsr-navy-900: #0B1B33;
  --nsr-navy-800: #10264A;
  --nsr-navy-700: #163358;
  --nsr-navy-600: #1D4270;
  --nsr-navy-500: #2A5590;
  --nsr-navy-400: #4A76B4;
  --nsr-navy-300: #8AA6CD;
  --nsr-navy-200: #C3D2E6;
  --nsr-navy-100: #E2EAF4;
  --nsr-navy-050: #F3F7FC;

  --nsr-teal-700: #06554C;
  --nsr-teal-600: #087668;
  --nsr-teal-500: #0C9683;
  --nsr-teal-400: #21B49E;
  --nsr-teal-300: #77D4C4;
  --nsr-teal-100: #D7F1EC;
  --nsr-teal-050: #EFFAF7;

  --nsr-violet-600: #55399B;
  --nsr-violet-500: #6C46B0;
  --nsr-violet-300: #B08ED8;
  --nsr-violet-100: #EEE7F8;

  /* ---- Interactive accent ---------------------------------------------
     Navy stays on the mark and on print. Everything a person can act on,
     and everything that shows where they are, uses this brighter blue.
     A dark navy active state reads as a filled block; this reads as a
     highlight, which is what a selected menu row should look like. */
  --ac-800: #1A3EA8;
  --ac-700: #1D4ED8;
  --ac-600: #2563EB;
  --ac-500: #3B82F6;
  --ac-300: #93B4FC;
  --ac-100: #DBEAFE;
  --ac-050: #EFF6FF;

  /* ---- Semantic status ------------------------------------------------ */
  --ok-700: #14663A;   --ok-500: #1F9D5B;   --ok-100: #E3F4EA;  --ok-050: #F2FAF5;
  --warn-700: #855405; --warn-500: #CA8300;  --warn-100: #FBF1DA; --warn-050: #FDF8ED;
  --risk-700: #92300F; --risk-500: #DA661C;  --risk-100: #FCEBDF; --risk-050: #FEF6F0;
  --crit-700: #8E201C; --crit-500: #C33630;  --crit-100: #FAE6E4; --crit-050: #FDF3F2;
  --info-700: #17497F; --info-500: #2A73C9;  --info-100: #E4EEFA; --info-050: #F3F8FD;
  --cold-700: #0B5479; --cold-500: #1887BC;  --cold-100: #DFF0F9; --cold-050: #F2F9FD;

  /* ---- Surfaces -------------------------------------------------------
     A near neutral page ground with a hint of cool, so white cards lift
     without needing a shadow to do it. */
  --bg-app: #F4F6F9;
  --bg-surface: #FFFFFF;
  --bg-raised: #FFFFFF;
  --bg-sunken: #F3F5F8;
  --bg-inset: #FAFBFC;
  --bg-chrome: #FFFFFF;        /* top bar */
  --bg-sidebar: #FFFFFF;       /* side navigation */
  --bg-sidebar-active: var(--ac-050);
  --bg-overlay: rgba(11, 27, 51, .42);
  --bg-hover: #F5F7FA;

  /* ---- Text ----------------------------------------------------------- */
  --tx-strong: #0E1B2E;
  --tx-body: #33445C;
  --tx-muted: #63748C;
  --tx-faint: #93A1B4;
  --tx-invert: #FFFFFF;
  --tx-invert-muted: #B9C7DC;
  --tx-link: var(--ac-700);

  /* ---- Lines ---------------------------------------------------------- */
  --line-hair: #EEF1F5;
  --line-soft: #E4E9F0;
  --line: #D8DFE9;
  --line-strong: #BCC7D6;
  --line-focus: var(--ac-500);

  /* ---- Type -----------------------------------------------------------
     Base moves from 14 to 14 with a taller line, and headings gain a
     step, so a page reads as a document rather than a control panel. */
  --font-ui: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-ar: "Segoe UI", "Noto Kufi Arabic", "Geeza Pro", "Al Bayan", Tahoma, sans-serif;
  --font-num: "SF Mono", "Roboto Mono", "Consolas", "Menlo", monospace;

  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px;
  --fs-15: 15px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px;
  --fs-22: 22px; --fs-26: 26px; --fs-30: 30px; --fs-38: 38px;
  /* kept so older pages do not break while they are converted */
  --fs-24: 22px; --fs-28: 26px; --fs-34: 30px; --fs-44: 38px;

  --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700;

  /* ---- Space ---------------------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-9: 48px; --sp-10: 64px;

  /* ---- Radius ---------------------------------------------------------
     Generous. A 14 pixel card corner is a large part of why a screen
     reads as current rather than as a records system from 2012. */
  --r-xs: 4px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-pill: 999px;

  /* ---- Elevation ------------------------------------------------------
     Cards sit on a soft double shadow with no border. Structure comes from
     the lift off the grey ground, not from an outline. */
  --sh-0: none;
  --sh-card: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --sh-1: 0 1px 2px rgba(16, 24, 40, .05);
  --sh-2: 0 2px 6px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .05);
  --sh-3: 0 8px 26px rgba(16, 24, 40, .12);
  --sh-4: 0 20px 52px rgba(11, 27, 51, .20);
  --sh-focus: 0 0 0 3px rgba(59, 130, 246, .22);

  /* ---- Layout --------------------------------------------------------- */
  --h-topbar: 60px;
  --w-sidebar: 250px;
  --w-sidebar-collapsed: 60px;
  --w-content-max: 1560px;

  /* ---- Motion --------------------------------------------------------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 110ms;
  --dur: 180ms;
  --dur-slow: 300ms;

  /* ---- Data visualisation ---------------------------------------------
     Categorical slots are assigned in this fixed order and never cycled.
     The order was checked with the palette validator against the light
     surface (#FFFFFF) and the dark surface (#10203A): lightness band,
     chroma floor, colour vision deficiency separation and normal vision
     separation all pass in both modes.
     Three light mode slots sit below 3 to 1 contrast, so every chart in
     this product carries direct labels and a table view beside it.
     Charts never carry a second y axis. Two measures means two charts. */
  --dv-1: #2a78d6;  /* blue    */
  --dv-2: #eb6834;  /* orange  */
  --dv-3: #1baf7a;  /* aqua    */
  --dv-4: #eda100;  /* yellow  */
  --dv-5: #e87ba4;  /* magenta */
  --dv-6: #008300;  /* green   */
  --dv-7: #4a3aa7;  /* violet  */
  --dv-8: #e34948;  /* red     */

  /* Sequential ramp for magnitude, one hue, light to dark. */
  --seq-1: #cde2fb; --seq-2: #9ec5f4; --seq-3: #6da7ec; --seq-4: #3987e5;
  --seq-5: #256abf; --seq-6: #184f95; --seq-7: #0d366b;

  /* Diverging pair with a neutral middle, for variance against plan. */
  --div-neg: #e34948; --div-mid: #f0efec; --div-pos: #2a78d6;

  --dv-grid: #EBEFF4;
  --dv-axis: #93A1B4;
  --dv-surface: #FFFFFF;
}

/* Dark presentation mode, used when a room projector washes out light screens */
:root[data-theme="dark"] {
  --bg-app: #0A1526;
  --bg-surface: #10203A;
  --bg-raised: #142744;
  --bg-sunken: #0D1B31;
  --bg-inset: #16294A;
  --bg-chrome: #0C1A2F;
  --bg-sidebar: #0B1830;
  --bg-sidebar-active: #1B3560;
  --bg-hover: #16294A;

  --tx-strong: #EAF1FB;
  --tx-body: #C6D5EA;
  --tx-muted: #8FA5C4;
  --tx-faint: #6C82A3;
  --tx-invert: #FFFFFF;
  --tx-invert-muted: #8FA5C4;
  --tx-link: #7CB7FF;

  --line-hair: #172C4B;
  --line-soft: #1C3358;
  --line: #24406B;
  --line-strong: #345C92;

  --nsr-navy-050: #16294A;
  --nsr-navy-100: #1B3560;
  --ok-100: #12351F;   --warn-100: #3A2A05;
  --crit-100: #3B1512; --risk-100: #3A1F0C;
  --info-100: #12294A; --cold-100: #0E2B3E;
  --ok-050: #0F2A1A;   --warn-050: #2E2208;
  --crit-050: #2F1310; --risk-050: #2E1A0A;
  --info-050: #0F2340; --cold-050: #0C2434;
  --nsr-teal-100: #0A3B36; --nsr-teal-050: #0B2E2B;
  --nsr-violet-100: #241640;

  /* Dark mode steps the same eight hues for the dark surface. It is a
     selected palette, not an automatic flip of the light one. */
  --dv-1: #3987e5; --dv-2: #d95926; --dv-3: #199e70; --dv-4: #c98500;
  --dv-5: #d55181; --dv-6: #008300; --dv-7: #9085e9; --dv-8: #e66767;
  --seq-1: #184f95; --seq-2: #256abf; --seq-3: #2a78d6; --seq-4: #3987e5;
  --seq-5: #5598e7; --seq-6: #86b6ef; --seq-7: #cde2fb;
  --div-neg: #e66767; --div-mid: #383835; --div-pos: #3987e5;
  --dv-surface: #10203A;

  --ac-800: #7CB7FF; --ac-700: #6BA9F7; --ac-600: #4A8FE8;
  --ac-500: #3B82F6; --ac-300: #2C5FA8;
  --ac-100: #1A3560; --ac-050: #14294A;

  --dv-grid: #1C3358;
  --sh-card: 0 1px 2px rgba(0, 0, 0, .3);
  --sh-1: 0 1px 2px rgba(0, 0, 0, .35);
  --sh-2: 0 2px 8px rgba(0, 0, 0, .42);
  --sh-3: 0 10px 28px rgba(0, 0, 0, .5);
  --sh-focus: 0 0 0 3px rgba(124, 183, 255, .25);
}

/* Density control, offered in the top bar. Warehouse users work on tablets
   and prefer larger rows. Head office users want more rows per screen. */
:root[data-density="comfortable"] { --row-h: 48px; --cell-py: 13px; }
:root[data-density="compact"]     { --row-h: 34px; --cell-py: 6px; }
:root                              { --row-h: 42px; --cell-py: 10px; }