/* ---------------------------------------------------------------------------
   JobFlow - Workshop design tokens

   Direction A, chosen 1 Nov 2026. Warm industrial: a dark steel nav rail with
   labels, a warm off-white canvas, one rust accent that always means the same
   thing, and type that makes numbers easy to read at a glance.

   THIS IS THE ONLY FILE THAT HOLDS A COLOUR. Everything else reads these
   variables. Re-skinning the product, or theming it for a second company, is a
   change here and nowhere else.

   The brief that settles the arguments: it has to be very easy to use at first
   glance. So navigation is labelled rather than icon-only, the accent is
   reserved for "this is the action" and never used as decoration, and nothing
   animates between a person and their work.
   --------------------------------------------------------------------------- */

:root {
  /* surfaces ------------------------------------------------------------- */
  --canvas:        #F7F5F1;   /* the page */
  --surface:       #FFFFFF;   /* cards, tables, panels */
  --surface-inset: #FAF8F4;   /* table headers, wells, totals rows */
  --surface-hover: #FCF7F3;   /* a row under the cursor */
  --border:        #E3DED5;
  --border-strong: #DDD6C9;   /* control borders, which need to read as edges */
  --border-soft:   #F0ECE4;   /* dividers inside a card */

  /* ink ------------------------------------------------------------------ */
  --ink:       #15181C;
  --ink-2:     #4A5056;
  --ink-muted: #6E757C;       /* 5.2:1 on canvas, so it passes at 12px */
  --ink-faint: #8A9199;       /* part numbers and metadata only, never prose */

  /* the nav rail --------------------------------------------------------- */
  --rail:          #1A1E22;
  --rail-hover:    #22262B;
  --rail-active:   #272C32;
  --rail-text:     #C4CAD1;
  --rail-text-on:  #FFFFFF;
  --rail-label:    #6E767F;
  --rail-divider:  #2A2F35;

  /* the accent. one colour, one meaning: this is the action. -------------- */
  --accent:        #BF5417;
  --accent-hover:  #A8460F;
  --accent-press:  #8F3D10;
  --accent-ink:    #8F3D10;   /* the accent as TEXT on a light background */
  --accent-soft:   #FBF0E9;
  --accent-border: #EFCDB8;
  --accent-on:     #FFFFFF;   /* text on an accent fill */

  /* status. the margin indicator lives here, so these carry meaning. ------ */
  --good:        #1C6B45;
  --good-soft:   #F0F8F4;
  --good-border: #C6E3D5;
  --warn:        #96620A;
  --warn-soft:   #FDF6E8;
  --warn-border: #EEDFBD;
  --bad:         #A8261D;
  --bad-soft:    #FDF2F1;
  --bad-border:  #F0CFCC;
  --info:        #1F5C8B;
  --info-soft:   #EBF2F8;
  --info-border: #C5DAEA;

  /* type ----------------------------------------------------------------- */
  /* Two families, not three. Archivo carries the interface AND the headings:
     it is a workhorse grotesque with enough character to be a decision rather
     than a default, and one family used well reads as more considered than two
     used adequately. JetBrains Mono takes every number, part code and quantity,
     which is what makes a column of money scannable rather than readable. */
  --font-display: Archivo, "Helvetica Neue", Arial, sans-serif;
  --font-ui: Archivo, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-xs:  11px;
  --text-sm:  12px;
  --text-base:13px;   /* the UI's default. 13px is dense without being mean. */
  --text-md:  15px;
  --text-lg:  18px;
  --text-xl:  23px;
  --text-2xl: 32px;
  --text-3xl: 46px;   /* the margin number, and nothing else */

  --label: 600 10px/1.2 var(--font-ui);
  --label-spacing: 0.08em;

  /* shape. flat and warm: 1px borders, almost no shadow. ----------------- */
  --radius:    6px;
  --radius-sm: 5px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(21, 24, 28, .05);
  --shadow-md: 0 4px 12px rgba(21, 24, 28, .08);
  --shadow-lg: 0 16px 40px rgba(21, 24, 28, .14);

  /* spacing on a 4px grid ------------------------------------------------ */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;

  /* motion. explains a state change, never delays the work. -------------- */
  --t-fast: .12s ease;
  --t-base: .18s ease;

  --rail-width: 232px;
  --tap: 44px;   /* the smallest a touch target ever gets */
}

/* Dark mode is deliberately not implemented. The office screens are used in a
   lit office all day, and the field app has to survive direct sunlight, where
   dark is actively worse. Adding a half-considered dark theme to a tool people
   rely on is worse than not having one. */