/* Dunsters Farm theme */
:root {
  /* Brand primary — Blueberry (#313844), the wordmark colour from the
     Dunsters Farm Brand Guidelines v1.1. Feeds primary buttons/links/rings
     and the derived page-builder --palette-* tokens. */
  --primary: #313844;
  --primary-foreground: oklch(0.985 0 0);
  --ring: #313844;
  --brand-accent: #313844;

  /* Search pill — fully rounded, no resting outline (Mike, 2026-09-08). The
     fill stays the platform grey (`--search-field` unset), which is what
     carries the shape once the border is gone; dropping BOTH would leave an
     invisible field on the white header. 9999px rather than Tailwind's
     `calc(infinity * 1px)`: the browser clamps radius to half the box either
     way, and a plain length needs no support caveat.

     The border only goes at REST. InputGroup sets its focus border through a
     `has-[…:focus-visible]:border-ring` variant, which outranks this on
     specificity, so the field still announces focus. */
  /* White utility strip instead of the default --muted grey. No seam rule
     here (unlike the KitWave tenants), so the strip and the header band below
     it are now one continuous white — the two are distinguished by their
     contents alone. */
  --top-bar: var(--background);

  /* The platform grey at FULL strength, not the default's 50% over white
     (~L 0.985), which is too faint to read as a field once the outline is
     gone. --muted is the same 0.97 the header chips (`bg-muted`,
     header-chips.ts) and the sidebar nav items (--sidebar-accent) already
     use, so the pill sits on the grey the rest of the chrome is built from
     rather than a value of its own. The token, not its value: it tracks
     light/dark, and it stays correct if the neutral ramp ever moves. */
  --search-field: var(--muted);
  /* Taller than the 2.5rem/40px default. 3rem/48px matches this tenant's
     --store-logo-height exactly, so the pill and the lockup read as one row
     rather than the search sitting low beside a taller mark, and it leaves
     12px either side in the 72px header. */
  --search-field-height-desktop: 3rem;
  --search-field-radius: 9999px;
  /* Insets the controls off the cap curve. The geometric answer is +12px —
     the pill is 48px tall, so its radius is 24px and the flat edge starts
     24px in, while the leading addon's `pl-3` sits the magnifier at 12px.
     8px by eye instead (Mike, 2026-09-08): the magnifier is a round glyph, not
     a square, so aligning its bounding box to the intersection pushed it
     visually past it. Optical, not geometric. */
  --search-field-inset-x: 0.5rem;
  --search-field-border: transparent;

  /* The wordmark stacks three lines — "SINCE 1963", "DUNSTERS", "FARM" —
     so the platform's 1.25rem/20px default leaves the outer lines
     unreadable. 3rem/48px fills 67% of the 72px (h-18) header row with 12px
     clearance either side; treat it as the ceiling, since past here the mark
     starts setting the row's height. The SVG's viewBox is trimmed to the
     glyphs, so 48px of box is 48px of mark. */
  --store-logo-height: 3rem;

  /* The Narrow content width on CMS pages, sections and page headers — a
     reading column rather than the platform's 80rem/1280px contained width
     (Mike, 2026-10-15). Read by `CMS_NARROW_PAGE_WIDTH_CLASS` only: the
     storefront's own contained pages (orders, invoices, account) stay at the
     platform width. */
  --cms-narrow-width: 1050px;
}

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