/* HB Clark theme — colours from the V1 storefront theme */
:root {
  --primary: #000f8f;
  --primary-foreground: oklch(0.985 0 0);
  --ring: #000f8f;
  /* V1 header accent colour. */
  --brand-accent: #163b64;

  /* KitWave header treatment (FO-4675 tokens), matching creed/total/
     westcountry: a white utility strip over a brand rule, then the white
     logo/search band — the rule, not a change of surface, divides the two.
     The default --top-bar (--muted grey) reads as a third band and leaves the
     rule nothing to do, so the strip goes white; the search field follows it.

     --top-bar-rule is named EXPLICITLY here rather than taking its
     var(--primary) default. --primary on this tenant is #000f8f, a placeholder
     shared with three other KitWave tenants from #3578, not a brand colour —
     so the default would put the same navy rule on four different brands.
     Left as-is deliberately (Mike, 2026-09-08): correcting --primary would
     move every button and CTA, which is a separate decision.

     The rule takes var(--brand-accent) — the V1 header accent colour
     (#163b64), already recorded at the top of this file. One colour in the
     artwork and no secondary, so at 11.39:1 this is a heavy line — the same
     trade westcountry makes. If it reads as a border rather than a brand
     device, lighten it with oklch(from var(--brand-accent) 0.55 c h) rather
     than thinning it.

     --top-bar-foreground/-strong keep the platform muted/foreground pair:
     0.556 grey on white is 4.8:1, so the links clear AA at rest. */
  --top-bar: var(--background);
  --top-bar-rule: var(--brand-accent);
  --top-bar-rule-height: 4px;
  --search-field: var(--background);
  --store-header-height-desktop: 5rem;

  /* 1:1 — a square badge, the only one on the platform, and the reason it
     needs more height than a wordmark does: a 4rem square carries the same
     visual weight as a wordmark barely half that tall, because none of its
     box is whitespace. The 20px default rendered it 20x20px, smaller than a
     favicon; 48px was still slight.

     64px leaves 8px of clearance either side in the 80px row — tight, but in
     line with westcountry's 9.5px, and it costs only 64px of width where a
     wordmark at this height would eat 150px+. Going further means raising
     --store-header-height-desktop with it. */
  --store-logo-height: 4rem;
}

.dark {
  --primary: oklch(from #000f8f 0.72 c h);
  --primary-foreground: oklch(0.204 0 0);
  --ring: oklch(from #000f8f 0.72 c h);
}