/* ==========================================================================
   INDUS INDUSTRIES — design tokens  (v1.0, Oct 2026)
   Source of truth for every surface: site, shipper portal, driver app,
   ops console, emails (inline the resolved hex), documents.
   Colour is defined in OKLCH on one brand hue family (H 158–168) and
   pre-resolved to hex. Every text pair below passes WCAG 2.1 AA on
   --panel or lighter; --control passes 3:1 for non-text UI.
   Dark ("Night") is the brand default. Light ("Day") is for paperwork,
   office use and print; it is a designed mode, not an inversion.
   ========================================================================== */

:root {
  /* ---- Ground ladder (Night) ------------------------------------------ */
  --ground:       #09130f;  /* oklch(.175 .016 168)  page background            */
  --surface:      #111b17;  /* oklch(.212 .018 166)  bands, sidebars            */
  --panel:        #19251f;  /* oklch(.250 .020 165)  cards, tables, sheets      */
  --raised:       #212f28;  /* oklch(.290 .022 164)  menus, popovers, hover row */
  --line:         #2a3932;  /* oklch(.330 .024 163)  hairlines, dividers        */
  --line-strong:  #3f5248;  /* oklch(.420 .030 162)  table rules, grid majors   */
  --control:      #62776c;  /* oklch(.550 .030 162)  input/checkbox borders 3:1 */

  /* ---- Text --------------------------------------------------------------- */
  --text:         #e2ece6;  /* oklch(.935 .014 158)  primary                    */
  --text-muted:   #a9bdb1;  /* oklch(.780 .028 160)  secondary                  */
  --text-faint:   #749182;  /* oklch(.630 .040 162)  labels, meta, placeholders */

  /* ---- Brand -------------------------------------------------------------- */
  --sage:         #9bc2aa;  /* oklch(.780 .054 158)  the mark, index contours   */
  --action:       #3d9a75;  /* oklch(.620 .105 164)  primary buttons, links     */
  --action-hover: #4cae86;  /* oklch(.680 .110 164)                             */
  --on-action:    #07100c;  /* oklch(.160 .016 168)  text on --action           */
  --live:         #64d8a4;  /* oklch(.800 .130 162)  live tracking, focus ring  */

  /* ---- Signal (status only, never decoration) ------------------------------ */
  --warn:         #efba64;  /* oklch(.820 .120 78)   hold, delay, dwell         */
  --fault:        #ed756a;  /* oklch(.700 .150 27)   exception, excursion, seal */
  --info:         #8ac0dd;  /* oklch(.780 .070 232)  scheduled, booked          */
  --cold:         #93d8e0;  /* oklch(.840 .070 205)  reefer temperature only    */

  /* ---- Charts --------------------------------------------------------------- */
  --chart-1: #74bd99; --chart-2: #6db5da; --chart-3: #c1a966; --chart-4: #b39edc; --chart-5: #5dbbc6;
  --seq-1: #073724;  --seq-2: #215941;  --seq-3: #3e8162;  --seq-4: #5cab86;  --seq-5: #7fdaaf;

  /* ---- Type ------------------------------------------------------------------ */
  --font-display: "Michroma", "Eurostile", "Microgramma", "Arial Black", system-ui, sans-serif;
  --font-text:    "IBM Plex Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-data:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem;  /* 11  tracked uppercase labels, chips          */
  --text-xs:  0.75rem;    /* 12  table meta, captions                     */
  --text-sm:  0.8125rem;  /* 13  dense UI, table cells                    */
  --text-md:  0.9375rem;  /* 15  UI body (portals)                        */
  --text-lg:  1.125rem;   /* 18  reading body, lede (site)                */
  --text-xl:  1.375rem;   /* 22  H3 / section titles (Plex Sans 600)      */
  --text-2xl: 1.75rem;    /* 28  H2 (Michroma)                            */
  --text-3xl: 2.25rem;    /* 36  H1 in-app (Michroma)                     */
  --text-4xl: clamp(2.25rem, 4.6vw, 3.625rem); /* 36–58 site display      */

  --leading-tight: 1.1;  --leading-snug: 1.3;  --leading-body: 1.6;
  --track-display: 0.16em;   /* Michroma headings                         */
  --track-label:   0.14em;   /* uppercase micro-labels                    */
  --track-wordmark: 0.2em;   /* INDUS                                     */
  --track-subword:  0.66em;  /* INDUSTRIES                                */

  /* ---- Space (4px base) ----------------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gutter: clamp(16px, 5vw, 72px);
  --max-content: 1280px;
  --max-read: 68ch;

  /* ---- Shape ------------------------------------------------------------------ */
  --r-0: 0;          /* panels, bands, tables                               */
  --r-1: 2px;        /* buttons, inputs, chips                              */
  --r-2: 4px;        /* cards, popovers — the maximum                       */
  --hair: 1px;
  --stroke-icon: 1.5px;

  /* ---- Elevation (Night uses surface steps, not shadows) ---------------------- */
  --shadow-1: none;
  --shadow-2: 0 0 0 1px var(--line), 0 12px 32px rgba(0, 0, 0, .45);

  /* ---- Motion ----------------------------------------------------------------- */
  --ease-out:    cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .25, 1);
  --t-fast: 120ms;  /* hover, press                                       */
  --t-base: 200ms;  /* panels, menus, chips                               */
  --t-slow: 320ms;  /* sheets, route redraws                              */
  --t-draw: 1500ms; /* the mark draw-on; once per session                 */

  /* ---- Focus ------------------------------------------------------------------ */
  --focus: 0 0 0 2px var(--ground), 0 0 0 4px var(--live);

  /* ---- Layers ----------------------------------------------------------------- */
  --z-map: 0; --z-content: 1; --z-sticky: 10; --z-menu: 20; --z-sheet: 30; --z-toast: 40;

  color-scheme: dark;
}

/* ---- Day mode: system preference, unless the user pinned Night ------------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-surface="brand"]) {
    --ground: #f2f7f4; --surface: #fcfefd; --panel: #e8f0eb; --raised: #ffffff;
    --line: #d1ddd5; --line-strong: #acbcb3; --control: #74857b;
    --text: #0f1a15; --text-muted: #42554c; --text-faint: #566c61;
    --sage: #31644a; --action: #016c4b; --action-hover: #00593d; --on-action: #f7fbf8; --live: #007650;
    --warn: #915b00; --fault: #b6322d; --info: #2b6991; --cold: #1f7183;
    --chart-1: #2f7959; --chart-2: #267194; --chart-3: #7d6622; --chart-4: #715c95; --chart-5: #007781;
    --shadow-1: 0 1px 0 var(--line), 0 1px 2px rgba(9, 19, 15, .06);
    --shadow-2: 0 0 0 1px var(--line), 0 12px 32px rgba(9, 19, 15, .12);
    color-scheme: light;
  }
}
/* ---- Day mode: pinned ------------------------------------------------------ */
:root[data-theme="light"]:not([data-surface="brand"]) {
  --ground: #f2f7f4; --surface: #fcfefd; --panel: #e8f0eb; --raised: #ffffff;
  --line: #d1ddd5; --line-strong: #acbcb3; --control: #74857b;
  --text: #0f1a15; --text-muted: #42554c; --text-faint: #566c61;
  --sage: #31644a; --action: #016c4b; --action-hover: #00593d; --on-action: #f7fbf8; --live: #007650;
  --warn: #915b00; --fault: #b6322d; --info: #2b6991; --cold: #1f7183;
  --chart-1: #2f7959; --chart-2: #267194; --chart-3: #7d6622; --chart-4: #715c95; --chart-5: #007781;
  --shadow-1: 0 1px 0 var(--line), 0 1px 2px rgba(9, 19, 15, .06);
  --shadow-2: 0 0 0 1px var(--line), 0 12px 32px rgba(9, 19, 15, .12);
  color-scheme: light;
}
/* data-surface="brand" on <html> locks Night (marketing site, login, driver app). */

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; --t-draw: 0ms; }
}