/* The palette, in ONE file, for every screen on the site.
 *
 * WHY THIS EXISTS. theme.css already made this argument once and won it halfway: it pulled the
 * palette out of the five screens that had copied it by hand. But only five screens ever linked
 * it. The photo side kept its own copy in photo-app.css, and index, edit, review and photo kept
 * theirs inline — so the site had FIVE palettes that happened to agree, and "happened to agree"
 * is not a design system. It is a bug waiting for somebody to change one orange — which is
 * exactly what was asked for the day after this file landed.
 *
 * It had already bitten once: most of those copies never declared --bad, because nothing on
 * those screens was red, so the shared confirm box's Remove button came out invisible. The test
 * that guards it ("the shared confirm never uses a colour it cannot fall back from") is still
 * there and still passing, but it is guarding against a problem this file removes at the root.
 *
 * THIS FILE IS LINKED FIRST ON EVERY PAGE, before theme.css / app.css / photo-app.css / nav.css
 * and before any page's own <style>. So it sets the defaults and anything after it can still
 * override deliberately. It contains ONLY custom properties — no selectors, no element styles —
 * which is what makes it safe to put on all seventeen screens at once: a token nobody reads
 * changes nothing, so adding this file can never restyle a page by surprise.
 *
 * EVERY OLD TOKEN NAME IS STILL HERE, including the aliases the screens disagreed about
 * (--paid vs --good, --radius at 10 on some screens and 12 on others). Nothing had to be
 * renamed to move, which is why the move was safe to make in one pass.
 */

:root{
  /* ---------- neutrals ----------
     WARM, AND THAT IS THE WHOLE POINT. The first pass lightened the old #E4E7EB paper but left
     the greys cold: paper was warm (#F7F4F1) while the text, borders and captions sitting on it
     were blue-greys (#14171C, #E1E5EB, #8A919E). Warm ground under cold ink is what made the
     redesigned screens still read as slightly clinical next to the brown furniture — the
     mismatch is subtle on one element and obvious across a whole page of rules and labels.
     Every neutral is now on the same warm axis as the paper and the rail, which is what the
     screenshots Nury approved actually show.

     --paper-2 does double duty: table headers and inset wells, and the track behind a
     segmented toggle (the selected option sits on white above it). */
  --paper:#F6F3EF;
  --paper-2:#EFEAE4;        /* a second, deeper ground — table headers, inset wells, toggle tracks */
  --card:#FFFFFF;
  --ink:#1F1A17;
  --ink-soft:#6E645C;
  --ink-faint:#8A7F76;      /* captions, timestamps, "3 of 12" — never body copy */
  --line:#E2DAD1;
  --line-soft:#EFE9E2;
  --line-strong:#CDBFB2;    /* for a border that has to hold its own against a fill */

  /* ---------- brand ----------
     ESPRESSO BROWN. Replaced the safety orange (2026-09-27), then a cooler cocoa brown
     (#5D4037) when the office screens were redesigned on 2026-10-03.

     THE ONE THING TO BE CAREFUL OF IS AMBER. Brown is a dark, desaturated orange, and --warn
     is an amber — so this accent lands nearer a status colour than indigo did, which is the
     same crowding that made orange shout. The separation is deliberate and it is in the
     SATURATION, not the hue: this brown is 38% saturated at hue 17, --warn is fully saturated
     at hue 36. One reads as a muted cocoa, the other as a hot gold. If anyone ever brightens
     this brown toward orange, it will start colliding with every warning on the site.

     THREE SHADES, AND THEY ARE NOT INTERCHANGEABLE. --accent is for FILLS — buttons, the
     active nav tab, the rule under the top bar; it is dark enough to carry white text at
     8.7:1. The rail's active pill is one step lighter (--accent-rail, below) so that it lifts
     off the near-black rail rather than sinking into it. --accent-ink is for TEXT and icons on a light background. Brown is dark enough
     that both work as text, but keep the split: it is the habit that stops a future lighter
     accent from being used as 11px body text. --accent-bright is the ONLY one for the dark
     bar; see the note on it below. */
  --accent:#6B4130;
  --accent-press:#58341F;
  --accent-tint:#F7ECE4;
  --accent-ink:#5A3424;
  --accent-ring:rgba(107,65,48,.30);
  /* THE SAME BRAND COLOUR, LIGHTENED FOR THE DARK BAR. Brown is darker than indigo was and
     far darker than the old orange: #6D4430 against the near-black nav is about 1.7:1, which
     is nearly invisible — well under the 3:1 floor for a graphic, let alone the 4.5:1 a label
     needs. A brown tab label on the black bar would simply not be there.

     No single shade does both jobs: anything light enough to read AS text on black is far too
     light to carry white text ON it. So there are two. --accent fills things on light
     backgrounds and takes white text (8.7:1). --accent-bright — a warm tan, the same colour
     family opened right up — is for anything sitting ON the dark furniture: a tab label, an
     icon, the active-tab cap, the brand dot (8.1:1). Never put white text on --accent-bright;
     it is 2.0:1 and fails badly. */
  --accent-bright:#E0A97E;
  /* A FILL WITH MORE PRESENCE THAN --accent-tint. Attendance marks a worked day by filling
     the day button, and --accent-tint is so pale that a filled day and an empty one were
     hard to tell apart at arm's length in daylight.

     It is also the token that proves the point of this file: attendance.html has been asking
     for var(--accent-soft) with no fallback since it was written, and nothing anywhere ever
     defined it — so a day marked present got no fill at all, only a changed border. Five
     private palettes is exactly how a colour goes missing for months without anyone noticing. */
  --accent-soft:#EDD8C9;
  /* THE ACTIVE ITEM IN THE DARK RAIL, and the one shade that is not interchangeable with
     --accent. On paper, --accent is a dark fill against a light page and reads as emphasis.
     On the rail it is a dark fill against a DARKER page — #6B4130 on #251C18 is 1.8:1, so the
     pill marking where you are barely showed. This is the same brown opened up until the pill
     separates from the rail (3.0:1) while still carrying white text at 7.4:1. Light background
     -> --accent. Dark rail -> this. */
  --accent-rail:#7A4A35;

  /* ---------- the accent series ----------
     The four colours screens cycle through to tell one section from the next, at deeper values
     than the originals because every one of them gets used as small bold text somewhere and
     the old set was thin against white.

     --info was a steel blue, #2F6AA8, until the accent briefly went indigo and the two read as
     two blues doing different jobs. The accent is brown now, so that clash is gone — but the
     deeper blue stayed, because it is simply more legible: 5.9:1 as text on white against the
     old 4.5:1, and this colour is used at badge size. It is the readable end of sky rather
     than the bright end — #0EA5E9 is lovely as a fill and about 2.8:1 as text, which is
     unreadable that small.

     --paid and --good are THE SAME COLOUR under two names. The footage side says "paid", the
     photo side says "good"; both were defined separately and drifted. Now neither can. */
  --paid:#1F7A55;      --paid-tint:#E4F2EA;
  --good:#1F7A55;      --good-tint:#E4F2EA;
  --warn:#8F5600;      --warn-tint:#FCF1DE;
  --bad:#B3261E;       --bad-tint:#F7E6E4;
  --info:#1D4E7A;      --info-tint:#EEF4FA;

  /* ---------- the dark surfaces ----------
     The top bar and the nav are dark on every screen, light form or dark console, so that the
     furniture reads as furniture. These were hardcoded in three files; they are named here so
     the bar and the sidebar cannot drift apart again.

     --dark-ink IS NOT WHITE, deliberately. Pure white on a warm near-black is the one pairing
     that makes a dark rail look like a different website from the page beside it — it is the
     coldest thing on screen sitting next to the warmest. #E4DAD0 is still 12:1, far past
     anything legibility needs, and it belongs to the same family as the paper. --dark-faint is
     the rail's section headings (APPROVE, FIELD, MONEY) — small all-caps labels, not copy. */
  --dark:#251C18;
  --dark-2:#342722;         /* hover / raised */
  --dark-line:#3D2E27;
  --dark-ink:#E4DAD0;       /* the rail's own text — not pure white; see the note below */
  --dark-soft:#B7A99D;      /* labels and inactive tabs on the dark bar */
  --dark-faint:#7D7168;     /* the rail's section headings (APPROVE, FIELD, MONEY) */

  /* ---------- elevation ----------
     Three steps, and they are about DISTANCE, not decoration: a card sits on the page, a
     sticky bar floats just over it, a dialog is off the page entirely. Two shadows at the same
     depth on top of each other is how a screen starts to look muddy. */
  /* KEYED TO WARM BROWN, not to the ink. A shadow is the page showing through, so a grey
     shadow under a card on warm paper reads as dirt rather than as depth. The card step is a
     hairline plus a wide, very soft drop lifted well off the element (-18px spread), which is
     what makes a card look placed on the page rather than cut out of it. */
  --shadow-1:0 1px 2px rgba(60,40,30,.04);
  --shadow-2:0 1px 2px rgba(60,40,30,.04), 0 10px 28px -18px rgba(60,40,30,.22);
  --shadow-3:0 2px 6px rgba(60,40,30,.06), 0 18px 36px rgba(60,40,30,.14);
  --shadow:var(--shadow-2);   /* the name the old screens already use */

  /* ---------- radius ----------
     theme.css said 10px and photo-app.css said 12px, which is why the two halves of the site
     never quite looked related. One scale now. --radius is the old name, kept so no screen had
     to be edited to keep working, and set to 12 because the softer corner is the nicer one.

     THE STEPS GO DOWN AS THINGS GET SMALLER, which is why --r-lg is 20 and --r-tile is 18. A
     stat tile sits INSIDE a card; giving both the same corner makes the inner one look like it
     is bulging out of the outer. One step tighter and it sits flat. --r-md stays 12 and is the
     input corner. Buttons and segmented toggles are not on this scale at all — they are
     --r-pill, every one of them. */
  --r-sm:8px;
  --r-md:12px;        /* inputs, and the old --radius alias */
  --r-lg:20px;        /* a card */
  --r-tile:18px;      /* a stat tile — one step tighter than the card holding it */
  --r-pill:999px;
  --radius:var(--r-md);

  /* ---------- focus ----------
     One ring, everywhere. Keyboard users and the office's laptop tabbing are the whole
     audience for this, and a ring that changes shape from screen to screen is a ring people
     stop trusting. */
  --focus-ring:0 0 0 3px var(--accent-ring);

  /* ---------- spacing ----------
     A small scale, so gaps between things are chosen from a set rather than typed from feel.
     Not retrofitted onto the old screens — it is here for anything new. */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px;

  /* ---------- type ----------
     16px on anything a finger taps is not a style choice: iOS zooms the page in when you tap a
     field smaller than that and never zooms back out, which leaves the screen sideways for the
     rest of the form. --fs-input exists so that rule has a name and stops being re-derived. */
  /* THE SYSTEM FACE, NOT A WEBFONT. Archivo was fetched from Google Fonts on every screen,
     which is a network round trip before any text can be drawn — on a phone on a job site that
     is the difference between a form that is readable at a red light and one that is not. The
     system face is already on the device. It is also what the screenshots Nury approved were
     rendered in, so matching them means dropping the webfont rather than keeping it.

     NUMBERS ARE TABULAR EVERYWHERE (see theme.css). Footage quantities, pay and day counts are
     read down a column far more often than across a line, and proportional digits make a
     column of figures ragged. Job codes like ILDC045 are NOT monospaced — they are names, read
     as a word, and a mono face made them look like machine output. */
  --font:-apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif;
  /* RAISED ONE STEP ON 2026-10-05. Nury, reading the site on her own phone: "everything is
     too small font (this goes for all of the website)". Body copy was 13.5px, which is below
     what any phone OS uses for its own lists, and the labels and captions under it were at
     10–12px. The scale below is the old one moved up a step and a half; the input floor is
     untouched because it is a platform rule, not a taste. */
  --fs-micro:11px;      /* the all-caps labels above fields */
  --fs-xs:12.5px;
  --fs-sm:13.5px;
  --fs-md:15px;       /* body copy and buttons */
  --fs-lg:16.5px;
  --fs-input:16px;      /* see above — do not lower this */
  --fs-h2:19px;
  --fs-h1:23px;
  --tracking-caps:.10em;
}