/* anpacken.css — one palette for the whole app.
   ───────────────────────────────────────────────────────────────────────
   anpacken had two visual identities. haus, kb, crm, integrations and hub
   were light and warm, matching the marketing site. Eighteen other pages —
   swept, mend, onboarding, inbox, dashboard and the rest — were dark with a
   top nav. Going Home → haus → swept looked like three different products,
   which is a dumb-product problem however good each page is on its own.

   The marketing site settles which way it goes: #F6F5F0 paper, brass-green
   signature. This file is that palette, loaded AFTER each page's own inline
   <style> so its :root wins on source order alone. Nothing inside a page has
   to change for it to take effect, and removing one <link> puts a page back
   exactly as it was.

   WHAT THIS FILE DOES NOT DO, deliberately:

   swept-ui.css — the older light layer — maps --amber, --warn and --green all
   to the same brand green. That reads beautifully and destroys meaning: on
   swept a same-day turnaround chip would become indistinguishable from a
   finished one, and those two things could not matter more differently at
   eight in the morning. A palette that makes urgent look like done is worse
   than two palettes.

   So the semantic three stay three. Green for settled, amber for wants
   attention, red for wrong — all retuned for dark ink on warm paper rather
   than light ink on black, which is a different job than lightening them.   */

:root {
  /* ── Ground ─────────────────────────────────────────────────────────── */
  --bg:        #F6F5F0;   /* warm paper, straight off the marketing site   */
  --surface:   #FFFFFF;   /* a card lifted off it                          */
  --surface2:  #FAF9F6;   /* an input, a well, something recessed          */
  --surface3:  #F0EEE9;   /* a quiet chip, a table header                  */
  --panel:     #FFFFFF;

  --border:      #E8E6DE;
  --border2:     #D6D1C7;
  --border-soft: #EDEAE3;

  /* ── Ink ────────────────────────────────────────────────────────────── */
  /* Not pure black. #1A1A18 on #F6F5F0 is 15.8:1 — past AAA with room to
     spare — and warm enough that it does not sit on the paper like a hole. */
  --text:  #1A1A18;
  --text2: #55524B;   /* 7.9:1 — AAA for body text, not just large         */
  /* Measured, not guessed. The first attempt at this line claimed 4.6:1 for
     #7D786F and a contrast pass over all 24 pages came back with 4.02:1 on
     paper — a fail, on the token used for every caption, every table header
     and every nav section label in the product. #726D64 is 4.71:1 on paper
     and 5.14:1 on a white card, which are the only two grounds it ever sits
     on. Nothing in this file is dimmer than this line.                      */
  /* Checked against EVERY ground in this palette, not just the two obvious
     ones. #726D64 passed on paper and on a white card and then failed at
     4.43:1 on --surface3, which is what a table header row is painted with —
     the row you read on every single scan. A token has to be safe wherever
     it can land, or it moves the bug somewhere harder to find.

       #6B675F   bg 5.16   surface 5.63   surface2 5.35   surface3 4.85

     Nothing in this file is dimmer than this line.                          */
  --text3: #6B675F;
  --muted: #6B675F;

  /* ── The signature ──────────────────────────────────────────────────── */
  --accent:      #0E5945;
  --accent-dark: #0B4736;
  --accent-dim:  rgba(14, 89, 69, 0.10);
  --accent2:     #0E5945;
  --brass:       #A87C2A;
  --brass-dim:   rgba(168, 124, 42, 0.12);
  /* Brass is a rule, a border, a fleck of gold on a chip — it is not text.
     At 3.45:1 on paper it fails as a label and looks washed out doing it. A
     darker one for anything you actually have to read. */
  --brass-text:  #7A5810;

  /* What goes ON the accent. This is the one token the dark theme cannot
     share: dark ink reads on a bright green, white ink reads on a deep one.
     Fifty-four places across sixteen files hardcoded #0A0D12 for exactly
     this and every one of them would have gone dark-on-dark here.          */
  --on-accent: #FFFFFF;

  /* ── The semantic three, kept apart ─────────────────────────────────── */
  --green:     #0E5945;   --green-dim: rgba(14, 89, 69, 0.10);
  --ok:        #0E5945;

  /* Amber on paper is the hard one: the obvious choice is a yellow that
     vanishes. #8A6414 is dark enough to read as text (5.9:1) while still
     unmistakably not green at a glance, which is the entire job.           */
  --amber:     #8A6414;   --amber-dim: rgba(168, 124, 42, 0.16);
  --warn:      #8A6414;

  --red:       #A8322E;   --red-dim:   rgba(168, 50, 46, 0.10);
  --danger:    #A8322E;

  --purple:    #5C5952;

  /* ── Type ───────────────────────────────────────────────────────────── */
  --sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── Lift ───────────────────────────────────────────────────────────── */
  /* On black, depth comes from a lighter surface. On paper it comes from a
     shadow, so the dark pages' near-invisible shadows need real ones.      */
  --shadow:    0 1px 2px rgba(26,26,24,0.04), 0 2px 8px rgba(26,26,24,0.05);
  --shadow-md: 0 2px 6px rgba(26,26,24,0.06), 0 12px 32px rgba(26,26,24,0.08);
}

/* The pages were written for a dark ground, so a handful of habits need
   undoing. Each of these is a pattern that was correct on black and is wrong
   on paper — not a per-page fix, a whole-theme one. */

/* A full-bleed dark body was often set directly rather than through --bg. */
body { background: var(--bg); color: var(--text); }

/* Text sitting on the accent. Anything that hardcoded near-black for this is
   caught by --on-accent; this catches the ones that asked for white on a
   colour that is now white itself. */
.go, .plan, .report, .start, .big, .btn.primary, button.main,
.acts button.main, .stepacts .main, .kinds button.on {
  color: var(--on-accent);
}

/* Form controls inherited the page background on dark and read as holes on
   paper. A recessed surface with a real border reads as a field. */
input, textarea, select {
  background: var(--surface2);
  border-color: var(--border2);
  color: var(--text);
}
input::placeholder, textarea::placeholder { color: var(--text3); }

/* A modal scrim tuned for a dark page is nearly invisible over paper. */
.sheet, .modal, dialog::backdrop { background: rgba(26, 26, 24, 0.38); }

/* Tables: a zebra that was a lighter stripe on black has to become a darker
   one on paper, or every other row disappears.
   The header takes --text2, not --text3: a column heading is a label you read
   every time you scan the table, not a caption you read once. --text3 on
   --surface3 is 4.43:1 and misses by a hair anyway. */
thead th { background: var(--surface3); color: var(--text2); }

/* Brass used as a label. The token is for ornament; this is for words. */
.kicker, .demochip, .brass-text { color: var(--brass-text); }

/* Column headings anywhere, not only inside a <thead>. Two tables on the
   Command Centre style their own th directly, and --text3 on a tinted row is
   4.43:1 — under by a hair, on the row you read on every single scan. */
th { color: var(--text2); }

/* Code and ids: on paper these want a tint, not a void.
   The tint has to come with the ink, though. A <code> inside a green panel
   was inheriting paper-coloured text onto deep green — 1.5:1, which is not
   low contrast, it is invisible — because only the colour was being set and
   the panel kept painting its own background through. */
code, .mono, kbd, samp {
  background: var(--surface3);
  color: var(--text2);
  border-radius: 4px;
  padding: 1px 5px;
}

/* Chrome I own outright, and which the contrast pass caught at 4.0:1: the
   brand line under the logo, and the section headings in the rail. Both are
   small, both are uppercase, and both were leaning on whatever --text3
   happened to be on that page. */
.lsub, .nl-sec, .nl-brand .lsub { color: var(--text3); }

/* "Both are uppercase" was true of the intent and not of the app. The rule
   lived in seven pages' own <style> blocks and in swept-ui.css, so the
   strapline read EVERY STAY, IN HAND on thirteen screens and every stay, in
   hand on fifteen, and clicking between them changed it. Nobody had seen it
   because nobody opens twenty-eight pages in a row; a contact sheet does.

   Here because this is the one stylesheet every page in public/ links. The
   pages that already say it keep saying it, harmlessly — uppercase twice is
   uppercase. */
.lsub, .nl-brand .lsub { text-transform: uppercase; }

/* ── "340 bookings · 12 need you" ─────────────────────────────────────────
   The count line above a long list. See /tally.js for the shape and why the
   empty case says "all clear" rather than a zero. Colours fall back so this
   works on the pages that carry their own palette. */
.tally{display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap;
  font-size:12.5px;letter-spacing:.2px;color:var(--text3,#7C8798)}
.tally b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--text,#F2F5FA)}
.tally .need{color:var(--amber,#C79A3E)}
.tally .clear{color:var(--green,#6FC3B4)}
.tally .sep{opacity:.45}
.tally .none,.tally .shown{opacity:.75}
.tallyline{margin:0 0 10px}