/* HLB design tokens. Single source of truth for color, type, layout. */

:root {

  /* Brand color */
  --hlb-navy:           #083558;
  --hlb-blue:           #006289;
  --hlb-turquoise:      #1CA5A1;
  --hlb-mint:           #6BE0CB;
  --hlb-coral:          #ED8973;
  --hlb-coral-light:    #FD826D;
  --hlb-ink:            #211F21;
  --hlb-white:          #FFFFFF;

  /* Type */
  --hlb-font-display:   'Geometos', sans-serif;
  --hlb-font-body:      'Gotham', 'GothamHTF', sans-serif;

  /* Layout. Linear ramp between two measured widths: 40px of gutter at 960,
     140px at 1600 to match the artboard. A flat percentage was tried first
     and starves the header below 1400, because the logo, nav, search and
     toggle are fixed width and only the gutter gives. Band caps at 1320. */
  --hlb-container:      1320px;
  --hlb-gutter:         clamp(40px, 15.625vw - 110px, 140px);
  --hlb-header-height:  96px;

  /* Header component hooks. Variants redefine these, never the rules. */
  --hlb-header-bg:      var(--hlb-white);
  --hlb-header-fg:      var(--hlb-ink);

  /* Composites to about #757475 on white, 4.66:1. Passes AA at 13px with
     very little margin. Do not lighten it. */
  --hlb-header-muted:   rgba(33, 31, 33, 0.62);

  /* Search field border. Was 0.14, which composites to about #E0E0E0 and
     measures 1.32:1 against white, failing 1.4.11. An empty box with a
     placeholder is only identifiable as an input by its border, so the
     "boundary not needed" exception that covers a filled button does not
     apply here. 0.5 composites to about #909090, 3.19:1. */
  --hlb-header-rule:    rgba(33, 31, 33, 0.5);

  --hlb-header-position: relative;
  --hlb-header-z:       200;

  /* Footer component hooks */
  --hlb-footer-cta-bg:  var(--hlb-turquoise);
  --hlb-footer-bg:      var(--hlb-navy);
  --hlb-footer-fg:      var(--hlb-white);
}

/* Mobile gutter. The 8.75% ratio is a desktop proportion and gets absurd on
   a phone, so the token is redefined rather than the rules. */
@media (max-width: 959px) {
  :root {
    --hlb-gutter: clamp(20px, 6vw, 40px);
  }
}

/* Scoped reset. Our components size themselves, they do not inherit
   whatever box model the parent theme happens to be setting. */
[class*="hlb-"],
[class*="hlb-"]::before,
[class*="hlb-"]::after {
  box-sizing: border-box;
}

/* Header variant: transparent over a dark hero. Ships with capabilities.
 *
 * NOT CONTRAST CHECKED. Both --muted and --rule here are white at partial
 * alpha over whatever hero image sits behind them, so neither can be measured
 * until a real background exists. --rule at 0.28 will almost certainly miss
 * the 3:1 that 1.4.11 wants for the search border. Measure both against the
 * actual hero before this variant ships. */
.hlb-header--transparent {
  --hlb-header-bg:      transparent;
  --hlb-header-fg:      var(--hlb-white);
  --hlb-header-muted:   rgba(255, 255, 255, 0.72);
  --hlb-header-rule:    rgba(255, 255, 255, 0.28);
  --hlb-header-position: absolute;
}

/* Header variant: transparent over a light hero. Ships with capabilities.
   Inherits the checked light-background values above. */
.hlb-header--transparent-dark {
  --hlb-header-bg:      transparent;
  --hlb-header-position: absolute;
}