/* 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;

  /* 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;

  /* At 4rem the lockup is geometrically centred in the 72px desktop row (4px
     either side), but the white band the eye reads is asymmetric: only 4px of
     white above it before the grey utility bar, against 12px below before the
     first content row. `items-center` would centre a 61px lockup at 45.5px;
     1.5px pushes it to 47px->108px, i.e. 7px above / 4px below. The 4px below
     is the fixed constraint — at 0px (the original 4rem + 4px pairing) the
     strapline touched the content on any page whose first row carries no top
     margin, e.g. a full-bleed banner, and at 2px it still read as tight. So
     the bottom gap is held and the top absorbs the difference. 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);
}