/* WestCountry Foodservice theme */
:root {
  /* Brand primary — the WestCountry lockup navy (#042641), read off their own
     vector artwork. Feeds primary buttons/links/rings and the derived
     page-builder --palette-* tokens. Their artwork carries this one colour and
     no secondary, so there is no separate accent to set. */
  --primary: #042641;
  --primary-foreground: oklch(0.985 0 0);
  --ring: #042641;
  --brand-accent: #042641;

  /* Header seam — the shared KitWave shape (white utility strip, thick brand
     rule, white logo/search band); creed.css establishes it. The strip goes
     white so the rule carries the division rather than competing with a grey
     band. No --top-bar-rule override: WestCountry's artwork carries the one
     navy and no secondary, so the rule takes the var(--primary) default.

     That navy is near-black, so this is a heavier line than Creed's orange —
     accepted, because there is no second brand colour to lighten it with.
     --top-bar-foreground/-strong keep the platform muted/foreground pair:
     0.556 grey on white is 4.8:1, clearing AA at rest and going to full ink
     on hover. */
  --top-bar: var(--background);
  --top-bar-rule-height: 4px;

  /* Search pill fill. White, not the platform's `--muted` at 50%, so the field
     matches the white header band around it — the KitWave storefronts run a
     white-on-white field bounded by its `border-input` outline rather than a
     grey trough. */
  --search-field: var(--background);

  /* WestCountry's only vector lockup is the stacked one (bar device over
     "WestCountry FOODSERVICE"), ~1.6:1 — at the 1.25rem default it renders
     32px wide and the strapline disappears. 4rem gives the stacked lockup and
     its strapline room to read: 64px tall / ~104px wide, which sits inside the
     72px desktop header row (`h-18`). Deliberately px, not rem, and an odd
     number: this row is a fixed 72px and the lockup is sized against it to the
     pixel, so a rem value here would only obscure the arithmetic. 61px leaves
     11px of slack, which the nudge below lands as 7px above / 4px below — 4px
     under the strapline is the floor, because at 2px it read as touching the
     content beneath, and every pixel of growth therefore comes off the top.
     This is the DESKTOP height; the phone rows take
     `--store-logo-height-mobile` and the auth screens pin their own below. */
  --store-logo-height: 61px;

  /* Row raised from the 4.5rem/72px default (Mike, 2026-09-08). At 72px the
     arithmetic above leaves 7px of white above the lockup and 4px below, and
     the 4px is a floor — so the logo can neither grow nor move down. That was
     tolerable while the band above it was the grey utility bar; it is not now
     the seam rule sits there, because this artwork is a skyline of tall bars
     in the SAME #042641 that touches y=0 of its own viewBox. A 4px navy rule
     7px above a navy bar device reads as one mass.

     80px re-runs the same arithmetic to 11px above / 8px below, both clear,
     with the logo untouched at 61px — the call `--checkout-header-height-
     desktop` documents for the funnel (raise the row, don't shrink the mark),
     applied to the storefront header. Also lands the storefront row on the
     same 5rem this tenant already runs at checkout, so the logo sits
     identically either side of the browse/funnel boundary. */
  --store-header-height-desktop: 5rem;

  /* Nudges the lockup down, because the white band the eye reads is not
     symmetric about the row: the band is bounded above by the header seam and
     below by the first content row, and those sit at different distances.
     `items-center` centres a 61px lockup geometrically; +1.5px shifts it so
     the gap below is the one that is held and the top absorbs the difference.
     At the 5rem row set above that lands 11px above / 8px below.

     ORIGINALLY TUNED against the 72px default row, where the same 1.5px gave
     7px above / 4px below and the band above was the grey utility bar. The 4px
     was a hard floor there — at 0px the strapline touched the content on any
     page whose first row carries no top margin (a full-bleed banner), and at
     2px it still read tight. Raising the row to 5rem is what bought the
     headroom; the nudge itself is unchanged, and the floor is no longer the
     binding constraint.

     Desktop storefront header only: no other surface has an asymmetric band
     like it — the checkout header has no utility bar above it, and the auth
     screens centre the logo in a column of their own. */
  --store-logo-offset-y: 1.5px;

  /* The 4rem desktop height is too dominant on a phone, where the row holds a
     44px toggle and a 36px action cluster rather than a search field. 3rem is
     the height this lockup shipped at before, so the FOODSERVICE strapline is
     known to stay legible. Applies below `lg` on both the storefront and
     checkout headers (FO-3563 keeps those two in step). */
  /* Pinned so trimming the header height above does not shrink the sign-in and
     invite screens with it — `--auth-logo-height` otherwise defaults to
     `max(2rem, var(--store-logo-height))`. Those screens centre the lockup in a
     column of their own, where 64px is the size that was chosen. */
  --auth-logo-height: 4rem;

  --store-logo-height-mobile: 3rem;

  /* The 4rem lockup exactly fills the checkout header's default 64px row, so it
     touches the top and bottom edges. 5rem gives it the same 8px either side it
     gets in the storefront header, without shrinking the logo at the funnel
     boundary (FO-3563). Desktop only — below `lg` the logo is 3rem and the
     stock 64px row already leaves 8px. */
  --checkout-header-height-desktop: 5rem;
}

.dark {
  /* Storefront currently forces light mode; kept for parity with the other
     tenant themes. Same navy hue/chroma, lightened so it reads on dark. */
  --primary: oklch(from #042641 0.72 c h);
  --primary-foreground: oklch(0.2 0 0);
  --ring: oklch(from #042641 0.72 c h);
  --brand-accent: oklch(from #042641 0.72 c h);
}