/* ---------------------------------------------------------------------------
 * variables.css — color + font tokens, generated from the Crush Figma tokens
 * (.figma-cache/tokens.json). Include an --{name}-rgb triplet for every color
 * used inside rgba(var()).
 * ------------------------------------------------------------------------- */
:root {
  /* Brand — Figma "Brand/Secondary" is the accent blue used across the site */
  --brand:          #008AF7;
  --brand-rgb:      0, 138, 247;
  --brand-dark:     #0070ca;
  --brand-dark-rgb: 0, 112, 202;

  /* Neutrals — Figma "Brand/Primary", "Neutral/Light", "Neutral/Dark" */
  --ink:            #212529;
  --ink-rgb:        33, 37, 41;
  --muted:          #909091;
  --muted-rgb:      144, 144, 145;
  --light:          #E8E8E8;
  --light-rgb:      232, 232, 232;
  --black:          #000000;
  --black-rgb:      0, 0, 0;
  --bg:             #ffffff;
  --bg-rgb:         255, 255, 255;
  --white:          #ffffff;
  --white-rgb:      255, 255, 255;

  /* Figma uses this slightly-off blue on the About icon badges rather than the
     Brand/Secondary token. Kept literal, but tokenized so no section CSS
     carries a raw hex. */
  --icon-blue:      #0099FF;

  /* Typography.
   * The design's heading face is Alfabet (commercial — Borutta), licensed
   * 2026-07-27 and served by the Adobe Fonts kit registered in functions.php
   * (cnm_starter_webfont_kit_url). The family name below is spelled exactly as
   * the kit's @font-face rules declare it: lowercase `alfabet`.
   *
   * Archivo 700 stood in for it during the build. Because every heading was
   * always sized / weighted / leaded to the Figma's Alfabet spec — nothing was
   * ever retuned to flatter the substitute — this one token was the whole swap.
   * No metric changed with it.
   *
   * --serif is kept as an alias of the body face so starter-inherited rules
   * that still reference it stay on brand. */
  --display-family: "alfabet";
  --display: var(--display-family), system-ui, sans-serif;
  --sans:    "DM Sans", system-ui, sans-serif;
  --serif:   "DM Sans", system-ui, sans-serif;

  /* Chrome — the header overlays the hero rather than reserving space.
     83px top padding + 67px logo + 24px bottom padding. */
  --header-h: 174px;
}

@media (max-width: 991px) {
  :root {
    /* Measured compact chrome: 16px padding × 2 + 72px logo/toggle row. The
       old 80px undershot it and let hero copy slide under the logo. */
    --header-h: 104px;
  }
}