/* ===========================================================================
   SetuHaul design tokens
   Shared by the operations dashboard and the driver app. Nothing in either app
   may hard-code a colour, a radius or a spacing value.

   THE COLOUR SYSTEM IS BORROWED, NOT INVENTED.
   Every loading dock has a physical red/amber/green light that tells a driver
   when it is safe to pull away. Operators and drivers already read it. So:

       green  = clearance  · healthy, on time, cleared to proceed
       amber  = hi-vis     · needs attention, at risk, plan moved
       red    = stop       · blocked, conflict, violation

   Colour in this product always reports STATE. It is never decoration, and a
   number is never tinted to look attractive.

   LIGHT-FIRST, DELIBERATELY.
   A dispatch office is a bright room and a driver is standing in Rajasthan
   sunlight. Dark-first would be a fashion choice against the environment.
   Dark mode exists for night shifts and is secondary.
   =========================================================================== */

:root {
  /* ---------------------------------------------------------------- base */
  --concrete:       #EDE9E3;   /* poured concrete — the canvas            */
  --concrete-lit:   #F7F4F0;   /* raised surfaces, cards                  */
  --concrete-deep:  #E2DCD3;   /* wells, tracks, inset areas              */
  --asphalt:        #1E2528;   /* warm near-black — ink and dark surfaces */
  --kraft:          #D8CDBB;   /* manifest paper — rules, hatching        */

  /* --------------------------------------------------------------- brand */
  --signal:         #1F4E79;   /* dock signage blue                       */
  --signal-bright:  #2C6DA4;
  --signal-deep:    #14344F;
  --signal-wash:    #E4EDF5;

  /* ------------------------------------------------- dock light semantics */
  --clearance:      #2E7D4F;
  --clearance-wash: #E3F1E8;
  --clearance-edge: #A9D4BC;

  --hi-vis:         #B8770B;   /* text-safe amber                         */
  --hi-vis-pure:    #E8A317;   /* the light itself — fills, tape, now-line*/
  --hi-vis-wash:    #FDF2DC;
  --hi-vis-edge:    #EFCF8C;

  --stop:           #C0392B;
  --stop-wash:      #FBE9E7;
  --stop-edge:      #EDB2AB;

  /* ----------------------------------------------------------------- ink */
  --ink:            #1E2528;
  --ink-2:          #3D4A52;   /* secondary copy                          */
  --ink-3:          #6B7A84;   /* labels, captions                        */
  --ink-4:          #94A2AB;   /* placeholders, disabled                  */
  --rule:           #D3CCC2;   /* hairlines                               */
  --rule-soft:      #E4DFD7;

  /* -------------------------------------------------------------- spacing
     4px base. Nothing between steps; if a value is not here it is wrong.   */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* --------------------------------------------------------------- shape
     Restrained. Freight signage is rectangular; heavy rounding reads toy.  */
  --r-1: 3px;  --r-2: 6px;  --r-3: 10px; --r-full: 999px;

  /* -------------------------------------------------------------- depth
     Shadows are shallow and warm — printed cards on a board, not glass.    */
  --lift-1: 0 1px 0 rgba(30,37,40,.06), 0 1px 2px rgba(30,37,40,.08);
  --lift-2: 0 1px 0 rgba(30,37,40,.05), 0 4px 12px rgba(30,37,40,.10);
  --lift-3: 0 12px 32px rgba(30,37,40,.18);

  /* ------------------------------------------------------------ typography
     Archivo  = signage voice (headings, KPI values, dock plates)
     Plex Sans= engineering-document voice (body)
     Plex Mono= data voice (IDs, timestamps, metrics — tabular by default)  */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-indic:   "Noto Sans Devanagari", "Noto Sans Gurmukhi", sans-serif;

  /* Type scale — 1.25 ratio, rounded to whole pixels. */
  --t-display: 40px;
  --t-h1:      28px;
  --t-h2:      21px;
  --t-h3:      17px;
  --t-body:    15px;
  --t-small:   13px;
  --t-micro:   11px;

  /* Driver app overrides these upward: sunlight, gloves, moving vehicle. */
  --t-driver-answer: 34px;   /* "where do I go and when" */
  --t-driver-body:   16px;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.55;

  --track-caps: .08em;       /* letterspacing for small caps labels */

  /* --------------------------------------------------------------- motion
     One orchestrated entrance, then micro-interactions only. Nothing loops. */
  --ease: cubic-bezier(.2,.7,.3,1);
  --dur-1: 90ms;
  --dur-2: 160ms;
  --dur-3: 280ms;

  /* --------------------------------------------------------------- layout */
  --appbar-h: 60px;
  --board-label-w: 92px;      /* sticky dock plate column */
  --maxw: 1600px;
}

/* Night shift. Same semantics, lower luminance; the dock lights keep their
   meaning because operators read hue, not brightness. */
@media (prefers-color-scheme: dark) {
  :root {
    --concrete:       #171C1F;
    --concrete-lit:   #1E2529;
    --concrete-deep:  #12171A;
    --kraft:          #2E2A24;

    --signal:         #6FA8D6;
    --signal-bright:  #8CBEE4;
    --signal-deep:    #0F2739;
    --signal-wash:    #16293A;

    --clearance:      #63C48D;
    --clearance-wash: #12291D;
    --clearance-edge: #2C5D42;

    --hi-vis:         #E8B45A;
    --hi-vis-pure:    #F0B33D;
    --hi-vis-wash:    #2C2413;
    --hi-vis-edge:    #5C4A20;

    --stop:           #F08579;
    --stop-wash:      #2E1613;
    --stop-edge:      #6B2E26;

    --ink:            #ECE7E0;
    --ink-2:          #C3BDB4;
    --ink-3:          #948D84;
    --ink-4:          #6B655D;
    --rule:           #2F373C;
    --rule-soft:      #262D31;

    --lift-1: 0 1px 2px rgba(0,0,0,.5);
    --lift-2: 0 4px 14px rgba(0,0,0,.55);
    --lift-3: 0 14px 36px rgba(0,0,0,.65);
  }
}

/* ---------------------------------------------------------------------------
   Hazard tape.
   Blocked and unavailable time is drawn with diagonal hazard hatching, exactly
   as it is painted on a dock floor. An operator reads "do not put anything
   here" without a legend.
   --------------------------------------------------------------------------- */
:root {
  --hazard: repeating-linear-gradient(
      45deg,
      var(--hi-vis-pure) 0 7px,
      var(--asphalt)     7px 14px);
  --hazard-soft: repeating-linear-gradient(
      45deg,
      rgba(232,163,23,.20) 0 6px,
      rgba(30,37,40,.10)   6px 12px);
  --conflict-hatch: repeating-linear-gradient(
      -45deg,
      rgba(192,57,43,.30) 0 5px,
      rgba(192,57,43,.06) 5px 10px);
}