/* =====================================================================
   SH ERP | The company look, shared by every screen
   File:    html/site.css
   Used by: every page. Loaded AFTER each page's own <style> block, so
            where both set the same thing, this file wins.

   WHAT LIVES HERE
   The colours, the font and the corners, written once as "tokens"
   (the --names below). Each screen's own styles use these names rather
   than writing colours out, so changing a colour here changes it on
   every screen at once.

   The decisions behind them are Agam's (8 Oct 2026, handover 09):
     - White base. Orange for accents only: main buttons, the marker for
       the screen you are on, highlights.
     - Company orange #FF9E1B, exactly the logo's.
     - Text ON orange is dark. White on that orange is about 2:1, and the
       floor reads these screens on phones in bright light.
     - Where orange has to be small text on white, a deeper shade of the
       same orange (#9C6010): 5.1 to 1 against white, past the 4.5 needed.
     - The dark text colour is the black from the logo (#1F1A17).
     - Saira, a little bold. Gently rounded corners, "not bubbly".

   WARNING COLOURS ARE NOT THE BRAND COLOUR
   If the brand orange and a warning looked alike, people would stop
   knowing which is decoration and which is a problem. So:
     red   (--err)   something is wrong: late, at risk, overdue.
     amber (--warn)  worth a look: due soon, no date promised, waiting,
                     fill this in. Agam's choice (8 Oct, handover 10),
                     reversing a brief spell as blue. Kept apart from the
                     brand orange by being yellower and darker: a dark
                     brown word on pale yellow, and a yellow edge -- never
                     an orange fill, which is only ever a button.
     green (--ok)    done, saved.
   Caution never relies on colour alone: it always carries a word.
   ===================================================================== */

/* ---------- the font ---------- */
/* Two weights only: 400 for reading, 600 for headings, labels and
   buttons. Anything asking for "bold" gets the 600. */
@font-face {
  font-family: 'Saira'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(vendor/saira/saira-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Saira'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url(vendor/saira/saira-latin-600-normal.woff2) format('woff2');
}

/* ---------- the tokens ---------- */
:root {
  /* the company */
  --brand:       #FF9E1B;   /* fills: main buttons, current screen, highlights */
  --brand-text:  #9C6010;   /* the same orange, deep enough to read as small text */
  --on-brand:    #1F1A17;   /* text sitting on orange */

  /* older names the screens' own styles already use, pointed at the new colours */
  --accent:      var(--brand);
  --accent-text: var(--brand-text);
  --on-accent:   var(--on-brand);

  /* text and surfaces */
  --ink:    #1F1A17;        /* the logo's black */
  --muted:  #625C56;        /* secondary text: 6.3 to 1 on the page */
  --line:   #E2DDD7;        /* borders */
  --bg:     #FAF9F7;        /* the page, just off white so white cards still show */
  --soft:   #F3F0EC;        /* quiet fills: stage pills, the "linked to" boxes */

  /* meaning */
  --err:      #B3261E;  --flagbg: #FDF1F0;  --flagline: #F0C9C5;   /* wrong */
  --warn:     #6B4E00;  --gap:    #FFF2C2;  --gapline:  #EBD27A;   /* worth a look */
  --warn-edge: #E6B800;     /* the 4px edge on a list row: yellower than the brand orange */
  --ok:       #1E6B3A;
  --stale:    var(--err);
  --calm:     var(--muted);

  /* shape and type */
  --radius:    6px;         /* buttons, inputs, cards */
  --radius-sm: 4px;         /* small badges */
  --radius-lg: 8px;         /* the sheets that slide up from the bottom */
  --font: 'Saira', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- type ---------- */
body { font-family: var(--font); color: var(--ink); background: var(--bg); }
input, select, textarea, button { font-family: inherit; }
h1, h2, h3, label, strong, b, th, button { font-weight: 600; }

/* ---------- buttons ---------- */
/* The quiet button ("Go back", "Edit", "Cancel"). It was blue on one
   screen and dark on another; now it is the same everywhere. */
.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); font-weight: 600; }

/* Keyboard focus, visible on white and on orange alike */
:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 2px; }

/* ---------- the header on every signed-in screen ----------
   Its layout (menu bar, name, Sign out) is in nav.css. */
.top {
  position: static; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px 12px;
  background: #fff; border-top: 0; border-bottom: 1px solid var(--line); padding: 10px 16px;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand .logo { height: 36px; width: auto; display: block; }
.who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .85rem; }

/* ---------- the sign-in and change-password cards ---------- */
.card .brand { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.card .brand .logo { height: 48px; }
.card .brand h1 { margin: 0; font-size: 1.25rem; }
.card .brand p { margin: 2px 0 0; color: var(--muted); font-size: .85rem; }