/* The six colours, named by JOB.
 *
 * Jayson asked on 2026-08-18 whether Figma would make the apps better. Counting first found 330
 * distinct hard-coded colours across 65 templates, 29 font sizes, and no stylesheet at all —
 * most of it added a screen at a time, in a hurry, by me.
 *
 * This file does NOT invent a palette. Every value below is already the de-facto meaning in the
 * app, just never named: green already means "put it in / confirmed" (63 uses), red already means
 * "stop / cannot" (81), amber already means "needs attention before you carry on" (18, and it is
 * the colour of the print-this-label-first screen). Naming what is already true is the cheap part
 * and the part that survives; inventing a new palette would mean restyling 65 pages to no benefit.
 *
 * THE RULE: a colour is chosen by what it MEANS, never by how it looks. If a new screen needs a
 * colour that is not here, that is a sign it is expressing a meaning the product does not have
 * yet — decide the meaning first, then add it here once.
 *
 * ops/style_ratchet.py counts raw hex values in templates and fails the deploy if the number goes
 * UP. It cannot go green by itself and it is not supposed to: the point is that it can only
 * improve. See the memo for why the file alone was never going to be enough.
 */

:root {
  /* --- state: what the screen is telling you --------------------------------------------- */
  --ee-good:        #1a7f4b;   /* put it in / in stock / confirmed / it worked                */
  --ee-good-soft:   #eaf7ee;   /* the same meaning as a background behind text                */
  --ee-on-accent:   #ffffff;   /* text/icons ON a saturated button — good/stop/accent fills  */
  --ee-stop:        #c0392b;   /* cannot proceed / out of stock / destructive                 */
  --ee-stop-soft:   #fdecea;
  --ee-warn:        #b26a00;   /* do this first — print the label, check the count            */
  --ee-warn-soft:   #fdf3e3;
  --ee-action:      #1a73e8;   /* a link or a button that goes somewhere                      */

  /* --- surface: the page itself ----------------------------------------------------------- */
  --ee-ink:         #1a1a1a;   /* body text                                                   */
  --ee-muted:       #5f6368;   /* secondary text. NOT for anything that must be read at arm's
                                  length in a warehouse — see the brief.                      */
  --ee-rule:        #ddd9d4;   /* hairlines and card borders                                  */
  --ee-surface:     #ffffff;
  --ee-paper:       #f7f7f8;   /* page background behind cards                                */

  /* --- type scale ------------------------------------------------------------------------- */
  /* Five sizes, not twenty-nine. The two large ones exist for one reason: the scan app is read
   * one-handed, in poor light, by someone holding a box — the bin code has to carry across a
   * room. That is why --ee-shout exists and why it is huge.                                   */
  --ee-fine:        12px;      /* timestamps, tracking numbers, things you lean in for         */
  --ee-body:        14px;
  --ee-lead:        16px;      /* anything a person acts on                                    */
  --ee-title:       20px;
  --ee-shout:       74px;      /* the bin code on the put-it-in screen. Readable across a room. */

  /* --- touch: the scan app is used with one thumb, sometimes in gloves -------------------- */
  --ee-tap-min:     44px;      /* nothing tappable is ever smaller than this                   */
  --ee-tap-primary: 56px;      /* the button they are meant to hit                             */
  --ee-gap:         12px;
  --ee-radius:      10px;
}