/* ==========================================================================
   MASAR — 1-tokens.css
   The single source of truth for colour, type, space, shape, depth, motion.
   Nothing below this file may invent a value. If a component needs a colour,
   a radius or a duration that is not here, the token is missing — add it here.

   Layers:
     PRIMITIVES  raw ramps. Never used directly by a component.
     SEMANTIC    what a thing means. This is what components use.
     THEME       the semantic layer re-pointed for dark.
   ========================================================================== */

:root{

  /* ---------------------------------------------------------------- 1. PRIMITIVES */

  /* Qatar maroon — identity. Never an operational status. */
  --c-maroon-50:#FBEDF1; --c-maroon-100:#F6D7DF; --c-maroon-200:#E9A8B9;
  --c-maroon-300:#D9738D; --c-maroon-400:#B93F63; --c-maroon-500:#8A1538;
  --c-maroon-600:#78122F; --c-maroon-700:#65102B; --c-maroon-800:#4E0C21;
  --c-maroon-900:#360817;

  /* Operations navy — chrome, navigation, deep surfaces. */
  --c-navy-50:#EEF3F8; --c-navy-100:#D8E4F0; --c-navy-200:#AEC5DC;
  --c-navy-300:#7FA1C2; --c-navy-400:#3F6C96; --c-navy-500:#0F3F6B;
  --c-navy-600:#0C3559; --c-navy-700:#092B4C; --c-navy-800:#061F38;
  --c-navy-900:#041526;

  /* Operational blue — interaction. If it is this blue you can press it.
     v6: re-stepped one notch calmer (higher contrast on white, less neon). */
  --c-blue-50:#EEF4FE;  --c-blue-100:#DBE7FC; --c-blue-200:#B7CEF9;
  --c-blue-300:#8AB0F6; --c-blue-400:#5B8DF0; --c-blue-500:#2E6BE6;
  --c-blue-600:#2458C7; --c-blue-700:#1D47A3; --c-blue-800:#16367D;
  --c-blue-900:#0F265A;

  /* Teal — in-progress / live operational. */
  --c-teal-50:#E8F7F5;  --c-teal-100:#CCEDE8; --c-teal-200:#94DCD2;
  --c-teal-300:#53C4B6; --c-teal-400:#20AC9B; --c-teal-500:#0F9D8A;
  --c-teal-600:#0B8172; --c-teal-700:#08665A; --c-teal-800:#064E45;
  --c-teal-900:#043831;

  /* Green — completed, compliant, on time. */
  --c-green-50:#E9F7F0;  --c-green-100:#CCEEDD; --c-green-200:#96DDBB;
  --c-green-300:#5DC894; --c-green-400:#2BB479; --c-green-500:#16A36A;
  --c-green-600:#118757; --c-green-700:#0D6B45; --c-green-800:#0A5235;
  --c-green-900:#073A26;

  /* Amber — warning, at risk, due soon. */
  --c-amber-50:#FDF4E5;  --c-amber-100:#FAE7C6; --c-amber-200:#F3CD8C;
  --c-amber-300:#EBB253; --c-amber-400:#E59A24; --c-amber-500:#C8811A;
  --c-amber-600:#A66A14; --c-amber-700:#855410; --c-amber-800:#66400C;
  --c-amber-900:#472C08;

  /* Red — critical only. Never decoration. */
  --c-red-50:#FDEEF0;   --c-red-100:#FAD8DD; --c-red-200:#F3AAB4;
  --c-red-300:#E97A8A;  --c-red-400:#DE4F65; --c-red-500:#D83A52;
  --c-red-600:#BC2540;  --c-red-700:#991C33; --c-red-800:#751527;
  --c-red-900:#520E1B;

  /* Violet — transfer / weighing / disposal chain. */
  --c-violet-50:#F2EEFC; --c-violet-100:#E4DCF8; --c-violet-200:#C6B7F0;
  --c-violet-300:#A48DE5; --c-violet-400:#8566D8; --c-violet-500:#6E4FC4;
  --c-violet-600:#5B3FA6; --c-violet-700:#483286; --c-violet-800:#372665;
  --c-violet-900:#261A47;

  /* Sand — the warm neutral that keeps this from reading as generic SaaS. */
  --c-sand-50:#FAF7F1;  --c-sand-100:#F2ECE0; --c-sand-200:#E4D9C4;
  --c-sand-300:#D0BF9F; --c-sand-400:#B8A278; --c-sand-500:#9C8659;

  /* Cool neutral — surfaces, borders, text. */
  --c-n-0:#FFFFFF;   --c-n-25:#FAFCFE; --c-n-50:#F4F7FA;  --c-n-100:#EAEFF5;
  --c-n-200:#DCE4EC; --c-n-300:#C3CEDA; --c-n-400:#9BAABB; --c-n-500:#7A8AA0;
  --c-n-600:#617083; --c-n-700:#46566B; --c-n-800:#2C3A4D; --c-n-900:#122033;
  --c-n-950:#0B1622;

  /* ---------------------------------------------------------------- 2. SEMANTIC */

  /* -- surfaces --------------------------------------------------- */
  --bg:               var(--c-n-50);     /* the page ground */
  --surface:          var(--c-n-0);      /* a card, a table, a panel */
  --surface-raised:   var(--c-n-0);      /* a menu, a popover, a drawer */
  --surface-sunken:   var(--c-n-50);     /* a well inside a card */
  --surface-subtle:   var(--c-n-25);     /* a striped row, a table head */
  --surface-inverse:  var(--c-navy-800);
  --scrim:            rgba(9,43,76,.44);

  /* -- navigation chrome (always dark, in both themes) -------------
     A rail is read for twelve hours at a time, so it is INK, not a brand
     panel: a near-black slate with the blue kept for the one row that is
     active. The old rail was a saturated navy with a bright blue block on
     it, which put the loudest colour on the screen next to the data. */
  /* THE RAIL IS THE BRAND, AND IT IS THE SAME IN BOTH THEMES.
     It was neutral grey in the light theme and navy in the dark one, which
     made the console's own chrome change identity with a setting. It is the
     operations navy now — the project's own ramp, the dark end of the same
     blue the accent comes from — in both, so the rail is the one fixed
     surface a shift looks at all day. The row you are standing on is that
     accent, filled: one signal, the brand's colour, and nothing at the edge.
     Everything here is a token; the two themes no longer override any of it. */
  --nav-bg:           var(--c-navy-800);
  --nav-bg-2:         var(--c-navy-900);
  --nav-item:         #B3C4D6;
  --nav-item-hover:   #EAF2FA;
  --nav-item-hover-bg:rgba(255,255,255,.07);
  --nav-item-on:      #FFFFFF;
  /* v6: the active row is a quiet lift with the identity maroon at its
     start edge — the loud blue block competed with the data it led to. */
  --nav-item-on-bg:   rgba(255,255,255,.11);
  --nav-item-on-hover:rgba(255,255,255,.15);
  --nav-edge:         var(--c-maroon-300);
  --nav-brand:        #FFFFFF;
  --nav-group:        #7791AB;
  --nav-line:         rgba(255,255,255,.08);
  --nav-count-bg:     rgba(255,255,255,.10);
  --nav-count-fg:     #CBDAEA;
  --nav-count-on-bg:  rgba(255,255,255,.24);
  --nav-watermark:    rgba(255,255,255,.05);
  /* the logo needs a light ground, and the ground under it is always dark */
  --mark-bg:          #FFFFFF;
  --mark-line:        rgba(255,255,255,.16);

  /* -- text -------------------------------------------------------- */
  --text:             var(--c-n-900);    /* primary */
  --text-2:           var(--c-n-600);    /* secondary, labels, sub-lines */
  --text-3:           var(--c-n-500);    /* tertiary, disabled, hints */
  --text-on-dark:     #FFFFFF;
  --text-on-accent:   #FFFFFF;

  /* -- lines ------------------------------------------------------- */
  --line:             var(--c-n-200);    /* the default hairline */
  --line-strong:      var(--c-n-300);    /* a field border, a divider that must read */
  --line-subtle:      var(--c-n-100);    /* a row rule inside a card */

  /* -- interaction ------------------------------------------------- */
  --accent:           var(--c-blue-500);
  --accent-hover:     var(--c-blue-600);
  --accent-press:     var(--c-blue-700);
  --accent-soft:      var(--c-blue-50);
  --accent-soft-line: var(--c-blue-100);
  --accent-on:        #FFFFFF;
  --focus-ring:       0 0 0 3px rgba(46,107,230,.30);

  /* -- identity (emphasis, never status) --------------------------- */
  --identity:         var(--c-maroon-500);
  --identity-deep:    var(--c-maroon-700);
  --identity-soft:    var(--c-maroon-50);
  --identity-on:      #FFFFFF;

  /* -- status. Each is a triple: ink (text on surface), fill (a mark),
        soft (a container) + its own on-colour. ----------------------- */
  --ok:        var(--c-green-700);  --ok-fill:var(--c-green-500);  --ok-soft:var(--c-green-50);  --ok-line:var(--c-green-100);  --on-ok:#FFFFFF;
  --live:      var(--c-teal-700);   --live-fill:var(--c-teal-500); --live-soft:var(--c-teal-50); --live-line:var(--c-teal-100); --on-live:#FFFFFF;
  --warn:      var(--c-amber-700);  --warn-fill:var(--c-amber-400);--warn-soft:var(--c-amber-50);--warn-line:var(--c-amber-100);--on-warn:#FFFFFF;
  --critical:  var(--c-red-700);    --crit-fill:var(--c-red-500);  --crit-soft:var(--c-red-50);  --crit-line:var(--c-red-100);  --on-crit:#FFFFFF;
  --info:      var(--c-blue-700);   --info-fill:var(--c-blue-500); --info-soft:var(--c-blue-50); --info-line:var(--c-blue-100); --on-info:#FFFFFF;
  --chain:     var(--c-violet-700); --chain-fill:var(--c-violet-500);--chain-soft:var(--c-violet-50);--chain-line:var(--c-violet-100);--on-chain:#FFFFFF;
  --neutral:   var(--c-n-600);      --neutral-fill:var(--c-n-400);  --neutral-soft:var(--c-n-100); --neutral-line:var(--c-n-200);  --on-neutral:#FFFFFF;

  /* -- waste streams. A stream colour is DATA: it appears on the map,
        in the legend, on a chip and in a chart, and must mean the same
        thing in all four. Seven primary streams per the product scope. */
  /* v6: re-stepped and machine-validated (CVD ΔE ≥ 10 between adjacent
     chart slots, ≥3:1 on white for all but bulk amber, which always carries
     a direct label). Same hue identities as before. */
  --ws-industrial: #3B7DD8;
  --ws-municipal:  #109E63;   /* citizen / domestic */
  --ws-medical:    #CE3657;
  --ws-treatment:  #7A5AD9;   /* treatment & disposal chain */
  --ws-sewage:     #1893AC;
  --ws-bulky:      #DB8B0B;
  --ws-chemical:   #937313;   /* hazardous */
  /* secondary streams carried by the engine (fold into the seven above
     wherever the surface shows the product's streams) */
  --ws-construction:#96835F;
  --ws-green:      #55943F;
  --ws-recycling:  #12A18B;
  --ws-tyres:      #64748B;

  /* -- vehicle / mission state. Used by markers, pills and charts. -- */
  --st-moving:     var(--c-blue-500);
  --st-collecting: var(--c-green-500);
  --st-loading:    var(--c-amber-400);
  --st-weighing:   var(--c-violet-500);
  --st-tipping:    var(--c-violet-600);
  --st-returning:  var(--c-teal-500);
  --st-idle:       var(--c-n-400);
  --st-depot:      var(--c-n-500);
  --st-maintenance:var(--c-amber-600);
  --st-breakdown:  var(--c-red-500);
  --st-offline:    var(--c-n-400);

  /* -- charts. Eight categorical slots, fixed order, never cycled.
        Validated for deuteranopia/protanopia separation. Maroon is
        deliberately absent: a series wearing the identity colour reads
        as branding, not as data. --------------------------------------- */
  --ch-1:#3B7DD8; --ch-2:#109E63; --ch-3:#DB8B0B; --ch-4:#CE3657;
  --ch-5:#1893AC; --ch-6:#7A5AD9; --ch-7:#937313; --ch-8:#C05580;
  --ch-grid:      var(--c-n-200);
  --ch-axis:      var(--c-n-500);
  --ch-label:     var(--c-n-600);
  --ch-surface:   var(--c-n-0);
  /* sequential ramp for choropleth and heat */
  --seq-1:#EAF2FB; --seq-2:#CFE2F6; --seq-3:#ABCDEE; --seq-4:#7FB2E2;
  --seq-5:#5293D3; --seq-6:#2F74BE; --seq-7:#1B579B; --seq-8:#0E3B70;

  /* -- map --------------------------------------------------------- */
  --map-bg:            #E8EEF3;
  --map-zone-line:     rgba(9,43,76,.45);
  --map-zone-fill:     rgba(22,119,255,.10);
  --map-muni-line:     rgba(9,43,76,.60);
  --map-muni-fill:     rgba(9,43,76,.045);
  --map-route:         var(--c-blue-500);
  --map-route-done:    var(--c-green-500);
  --map-marker-ring:   #FFFFFF;
  --map-marker-shadow: 0 2px 6px rgba(6,31,56,.34);
  --map-panel:         rgba(255,255,255,.94);
  --map-panel-line:    rgba(9,43,76,.10);
  /* the frame: what the country is NOT drawn against, and the edge it is
     recognised by. The mask is the page ground, so the sea and the
     neighbouring mainland recede to the same surface the console sits on. */
  --map-mask:          #DCE4EC;
  /* the veil over everything that is not the subject, and the halo that
     lifts the coast out of it — kept to a whisper, because the neighbours
     are context, not clutter */
  --map-veil:          #05090F;
  --map-halo:          #FFFFFF;
  --map-coast:         rgba(9,43,76,.55);
  --map-casing:        #FFFFFF;

  /* ---------------------------------------------------------------- 3. TYPE */

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-ar: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font-num: 'Inter', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* role / size / line-height / weight / tracking — a console runs dense,
     so the body roles sit one step below a marketing scale. */
  /* THE CONSOLE RUNS AT 100%.
     The whole scale used to be sized for a browser at 80% — at the zoom
     people actually work at, every row, every label and every control was
     one step too big and the screen filled before the content did. One
     step down, across the scale, so 100% is the design size. */
  --ty-display:   700 26px/32px var(--font);
  --ty-h1:        650 19px/25px var(--font);
  --ty-h2:        650 15.5px/21px var(--font);
  --ty-h3:        600 13px/18px var(--font);
  --ty-body:      400 12.5px/18px var(--font);
  --ty-body-sm:   400 11.8px/17px var(--font);
  --ty-label:     550 11.8px/15px var(--font);
  --ty-label-sm:  550 10.8px/14px var(--font);
  --ty-caption:   400 10.8px/15px var(--font);
  --ty-metric:    700 22px/26px var(--font);
  --ty-metric-sm: 700 17px/21px var(--font);

  --track-tight:-.012em;
  --track-wide:  .02em;

  /* ---------------------------------------------------------------- 4. SPACE */

  --s-0:0;    --s-1:4px;  --s-2:7px;  --s-3:10px; --s-4:13px;
  --s-5:16px; --s-6:20px; --s-7:26px; --s-8:32px; --s-9:40px; --s-10:52px;

  --gutter:      16px;   /* page side padding */
  --gutter-lg:   20px;
  --card-pad:    13px;
  --card-pad-lg: 16px;
  --row-h:       36px;   /* a table row with room to be read */
  --row-h-lg:    42px;
  --control-h:   32px;
  --control-h-sm:27px;
  --control-h-lg:36px;

  /* ---------------------------------------------------------------- 5. SHAPE */

  --r-xs:5px; --r-sm:7px; --r-md:9px; --r-lg:12px; --r-xl:16px; --r-2xl:20px;
  --r-full:999px;

  /* ---------------------------------------------------------------- 6. DEPTH
     Low alpha and short offsets. Twenty cards at a default Material
     elevation reads as a relief map, not as a console.               */

  --sh-xs: 0 1px 2px rgba(18,32,51,.05);
  --sh-sm: 0 1px 3px rgba(18,32,51,.07), 0 1px 2px rgba(18,32,51,.04);
  --sh-md: 0 4px 12px rgba(18,32,51,.08), 0 1px 3px rgba(18,32,51,.05);
  --sh-lg: 0 12px 28px rgba(18,32,51,.12), 0 4px 8px rgba(18,32,51,.06);
  --sh-xl: 0 24px 48px rgba(18,32,51,.16), 0 8px 16px rgba(18,32,51,.07);
  --sh-map:0 2px 10px rgba(6,31,56,.16);

  /* ---------------------------------------------------------------- 7. MOTION */

  --ease:      cubic-bezier(.32,.72,.32,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-in:   cubic-bezier(.4,0,1,1);
  --t-fast:    160ms;   /* a control you are touching */
  --t-base:    200ms;   /* something appearing or leaving */
  --t-slow:    280ms;   /* a drawer or a page travelling */
  --t-marker:  900ms;   /* a live vehicle sliding to its next fix */

  /* ---------------------------------------------------------------- 8. LAYERS */

  --z-map:0; --z-map-hud:400; --z-sticky:500; --z-nav:600; --z-top:650;
  --z-popover:700; --z-drawer:800; --z-modal:900; --z-toast:1000;

  /* ---------------------------------------------------------------- 9. METRICS */

  --nav-w:224px;
  --nav-w-rail:58px;
  --top-h:52px;
  --filterbar-h:42px;

  color-scheme:light;
}

/* ============================================================== DARK THEME
   The navigation chrome does not invert — it is already dark, and an
   operator switching to dark at 02:00 expects the *content* to darken,
   not the furniture to move.                                            */

html[data-theme="dark"]{
  --bg:              #0B1622;
  --surface:         #141F2E;
  --surface-raised:  #1A2736;
  --surface-sunken:  #0E1A27;
  --surface-subtle:  #17222F;
  --surface-inverse: #E3EDF7;
  --scrim:           rgba(4,21,38,.62);

/* the navigation rail is theme-independent — see the note in :root */

  --text:   #E7EDF5;
  --text-2: #9BAABB;
  --text-3: #7A8AA0;

  --line:        #253346;
  --line-strong: #32435A;
  --line-subtle: #1D2A3A;

  --accent:      #6AA0F5;
  --accent-hover:#85B3F7;
  --accent-press:#5B8DF0;
  --accent-soft: rgba(91,141,240,.16);
  --accent-soft-line: rgba(91,141,240,.32);
  --focus-ring:  0 0 0 3px rgba(106,160,245,.40);

  --identity:      #D9738D;
  --identity-deep: #B93F63;
  --identity-soft: rgba(138,21,56,.22);

  --ok:#5DC894;       --ok-fill:#2BB479;    --ok-soft:rgba(22,163,106,.16);   --ok-line:rgba(22,163,106,.32);
  --live:#53C4B6;     --live-fill:#20AC9B;  --live-soft:rgba(15,157,138,.16); --live-line:rgba(15,157,138,.32);
  --warn:#EBB253;     --warn-fill:#E59A24;  --warn-soft:rgba(229,154,36,.16); --warn-line:rgba(229,154,36,.32);
  --critical:#E97A8A; --crit-fill:#DE4F65;  --crit-soft:rgba(216,58,82,.16);  --crit-line:rgba(216,58,82,.34);
  --info:#74AEFF;     --info-fill:#3D8DFF;  --info-soft:rgba(22,119,255,.16); --info-line:rgba(22,119,255,.32);
  --chain:#A48DE5;    --chain-fill:#8566D8; --chain-soft:rgba(110,79,196,.18);--chain-line:rgba(110,79,196,.34);
  --neutral:#9BAABB;  --neutral-fill:#617083;--neutral-soft:rgba(155,170,187,.14);--neutral-line:#32435A;

  /* streams lift for a dark ground — same hue, higher luminance */
  --ws-industrial:#5B95E8; --ws-municipal:#1CA468; --ws-medical:#DB4F70;
  --ws-treatment:#8A70DC;  --ws-sewage:#21A3BD;    --ws-bulky:#D07F0A;
  --ws-chemical:#A8842D;   --ws-construction:#B9A98D; --ws-green:#7FBA68;
  --ws-recycling:#53C4B6;  --ws-tyres:#93A3B3;

  --st-moving:#4D96FF; --st-collecting:#2BB479; --st-loading:#E59A24;
  --st-weighing:#8566D8; --st-tipping:#A48DE5; --st-returning:#20AC9B;
  --st-idle:#7A8AA0; --st-depot:#8E9DB0; --st-maintenance:#EBB253;
  --st-breakdown:#DE4F65; --st-offline:#617083;

  --ch-1:#5B95E8; --ch-2:#1CA468; --ch-3:#D07F0A; --ch-4:#DB4F70;
  --ch-5:#21A3BD; --ch-6:#8A70DC; --ch-7:#A8842D; --ch-8:#D06E97;
  --ch-grid:#253346; --ch-axis:#7A8AA0; --ch-label:#9BAABB; --ch-surface:#141F2E;
  --seq-1:#0E2233; --seq-2:#143149; --seq-3:#1B4160; --seq-4:#235379;
  --seq-5:#2E6796; --seq-6:#3F7EB3; --seq-7:#5F9BCB; --seq-8:#8FBEE2;

  --map-bg:#0C1826;
  --map-zone-line:rgba(160,196,232,.45);
  --map-zone-fill:rgba(77,150,255,.12);
  --map-muni-line:rgba(160,196,232,.55);
  --map-muni-fill:rgba(160,196,232,.05);
  --map-marker-ring:#141F2E;
  --map-marker-shadow:0 2px 8px rgba(0,0,0,.55);
  --map-panel:rgba(20,31,46,.94);
  --map-panel-line:rgba(160,196,232,.14);
  --map-mask:#070E18;
  --map-veil:#040A12;
  --map-halo:#8FB6DE;
  --map-coast:rgba(160,196,232,.55);
  --map-casing:#0C1826;

  --sh-xs:0 1px 2px rgba(0,0,0,.30);
  --sh-sm:0 1px 3px rgba(0,0,0,.36), 0 1px 2px rgba(0,0,0,.24);
  --sh-md:0 4px 12px rgba(0,0,0,.42), 0 1px 3px rgba(0,0,0,.28);
  --sh-lg:0 12px 28px rgba(0,0,0,.50), 0 4px 8px rgba(0,0,0,.30);
  --sh-xl:0 24px 48px rgba(0,0,0,.58), 0 8px 16px rgba(0,0,0,.34);
  --sh-map:0 2px 10px rgba(0,0,0,.55);

  color-scheme:dark;
}