/* Manion Foods — shared colour tokens.
   ════════════════════════════════════════════════════════════════════════════
   THE SINGLE SOURCE OF TRUTH FOR COLOUR. Loaded by every public page AND by the
   admin panel, which is the whole point of the file: admin/admin.css used to
   carry its own copy of the brand greens and they drifted — the panel's --green
   sat on #008653 and its --green-dark on #004d29 while the site had moved on,
   so the tool looked like a different product from the pages it edits.

   Every page links this alongside its own stylesheet:

     <link rel="stylesheet" href="css/tokens.css">     (../css/tokens.css in admin/)
     <link rel="stylesheet" href="css/styles.css">     (admin.css in admin/)

   Order is convention, not a requirement — tested both ways. Custom properties
   resolve at computed-value time, once the whole cascade is assembled, so a
   var() in styles.css finds a token declared in a stylesheet that came after
   it. Source order between these two files would only matter if both declared
   the same property, and they never do: this file declares, the others consume.
   Tokens-first is still how they are written, because that reads correctly.

   What DOES break the site is this file not arriving at all — see the note in
   the deploy checklist. A missing tokens.css leaves every colour unresolved:
   backgrounds fall back to transparent and the page renders as unstyled text on
   white. Loud, at least, rather than subtly wrong.

   Two parallel <link>s rather than an @import inside styles.css: @import
   serialises the download and blocks rendering behind it, which is exactly the
   cost this site's asset work has been spent avoiding.

   Nothing but custom properties belongs here. Layout, type scale, spacing,
   radii and elevation stay in css/styles.css — the admin has its own and does
   not want them.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* -- Ground -------------------------------------------------------------
     Three cool neutrals. Sections alternate bone / sand, and --paper is
     reserved for things that should read as a card lifted off the page.

     These were warm cream (#faf7f2 / #f3eee6) in the first pass. That is a
     specific, recognisable look — cream ground plus high-contrast serif plus
     terracotta accent — and it turns up on sites that have nothing to do with
     each other, which means it is a default rather than a decision. The old
     --sand sat 5/255 from the canonical version of it.

     Cool paper instead: it reads closer to what this business actually is
     (cold chain, steel, a warehouse in Superior) and it lets the one accent
     colour carry the warmth. The hue is nearly neutral with a hair of green,
     so it sits under the brand green without competing with it. */
  --bone: #f6f7f6;
  --sand: #eaece9;
  --sand-deep: #d9ddd8;
  --paper: #ffffff;

  /* -- Ink ----------------------------------------------------------------
     Tiers are measured against --sand, not --bone. Sand is the darker of the
     two grounds, so anything that passes there passes everywhere; checking
     against the lighter one is how the faint tier ended up at 4.48:1 when the
     ground was cooled, which is a fail dressed up as a pass.

     On --sand: ink 15.4:1, ink-soft 6.8:1, ink-faint 4.75:1.
     On --bone: ink 17.0:1, ink-soft 7.5:1, ink-faint 5.25:1. */
  --ink: #14181a;
  --ink-soft: #4a5250;
  --ink-faint: #5f6763;

  /* -- Green --------------------------------------------------------------
     --green is 6.4:1 on bone and 6.8:1 behind white text, so it works as a
     link colour and as a button fill without a second "accessible" variant.
     --green-forest is the footer / dark-anchor surface. */
  --green: #00693f;
  --green-deep: #044e31;
  --green-forest: #03301f;
  --green-wash: #e8f1ec;

  /* -- The dark band ------------------------------------------------------
     Every dark green surface on the site — interior mastheads, the closing
     CTA, the mid-page anchor and the footer. It is --green-deep, the same
     green already filling the primary buttons, so the site runs one green in
     two weights rather than two unrelated greens.

     It replaced --green-forest here because forest separated from the coal
     header by only 1.27:1 and read as a second header; this is 1.89:1.
     --green-forest is still the token for small dark elements on LIGHT
     grounds (the flyer tab, quote-arrow hover), which is a different job.

     WARNING: the color-mix percentages for text on this surface are tuned to
     THIS green. It is light enough that the mixes tuned against forest fall
     under 4.5:1 — that is what pushed the footer's eyebrow labels from 58% to
     68% and the copyright line from 55% to 66%. Retone the band and every
     percentage that mixes toward it has to be re-derived, not carried over. */
  --green-band: var(--green-deep);
  /* --green-on-dark is only 3.82:1 here, so the band gets its own accent.
     Scoped deliberately: coal and the hero keep --green-on-dark, which is a
     truer brand green and is already measured against the hero photograph. */
  --green-on-band: #49c794;

  /* There was a second accent here — a terracotta used for eyebrow labels and
     a badge component. Both are gone: the badge was never placed on any page,
     and the eyebrows were category labels that repeated the heading under them.
     Once those went, the accent had no job left, so green is now the only
     colour on the site that is not a neutral. One accent is easier to spend
     well than two. */

  /* Legacy aliases. The stylesheet below and a handful of inline styles still
     name these; they now resolve into the palette above rather than the old
     one, which is what retones the pages this redesign hasn't restructured. */
  --green-dark: var(--green-deep);
  --green-darker: var(--green-forest);
  --green-light: var(--green-wash);
  --green-light-2: var(--sand);
  --text: var(--ink);
  --text-muted: var(--ink-soft);
  --white: var(--paper);

  --border: #e5ddd1;
  --border-strong: #d5c9b6;

  /* -- Dark surfaces ------------------------------------------------------
     Added when the site's chrome went dark. --coal is the header on every
     page and the homepage hero; --green-band is every dark green surface
     (interior mastheads, the closing CTA, the mid-page anchor, the footer).

     Near-black with a green undertone rather than a neutral slate, so the
     brand green reads as the same family sitting on it instead of a colour
     dropped onto grey. Measured on --coal: bone 17.2:1, bone-dim 11.3:1,
     green-on-dark 7.2:1. */
  --coal: #0e1512;
  --coal-line: rgba(246, 247, 246, 0.16);
  --bone-dim: #c3ccc6;
  /* --green is 2.7:1 on coal — unusable for a link or a small figure. This is
     the same hue opened up until it clears AA at text sizes. It exists ONLY
     for dark surfaces; on bone it fails, so never reach for it on a light
     ground. */
  --green-on-dark: #19b877;
}