/* hovarns-brand.css — the Hovarns brand tokens, for any Hovarns-branded surface (parent page, /tools/, /account/).
   Derived from the Hovarns wordmark (heavy black lowercase "hovarns" + a red full stop).
   Usage: <link rel="stylesheet" data-page-css href="/assets-hovarns/hovarns-brand.css">
   Everything is prefixed --hz-* / .hz-* so it can sit next to any page's own CSS.

   Rules of the world:
   - Ink, white, and ONE red. Red is only ever the full stop: dots, a connecting line, focus rings, selection.
     Never red text blocks, never red buttons, never a second accent.
   - Display type is Inter Black (900) at the wordmark's own tracking (-0.038em), usually lowercase or sentence case,
     ending in a red full stop (.hz-stop). Text is Inter 400/600.
   - Square-ish corners (2px controls, 4–6px frames), 1px ink hairlines, no gradients, no decorative shadows.
   - Tight gutters: the top bar uses --hz-bar-pad (12–22px), pages use --hz-gutter (14–28px).

   Assets: /assets-hovarns/img/hovarns-wordmark.svg (vector, exact), hovarns-wordmark.png (fallback),
           /assets-hovarns/img/favicon.svg (h + full stop). */

@font-face{font-family:"Hovarns Inter";src:url(/assets-hovarns/fonts/inter-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hovarns Inter";src:url(/assets-hovarns/fonts/inter-semibold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Hovarns Inter";src:url(/assets-hovarns/fonts/inter-black.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}

:root{
  /* colour */
  --hz-ink:#0B0F19;              /* wordmark ink (sampled from the logo) */
  --hz-ink-2:#454A57;            /* secondary text on white — 8.9:1 */
  --hz-ink-3:#6B707C;            /* tertiary text on white — 4.9:1 */
  --hz-paper:#FFFFFF;
  --hz-red:#E11D2E;              /* the full stop (sampled from the logo) — 4.75:1 on white */
  --hz-rule:rgba(11,15,25,.14);  /* hairline between rows */
  --hz-rule-strong:rgba(11,15,25,.9);
  --hz-on-ink:#FFFFFF;
  --hz-on-ink-2:rgba(255,255,255,.74);
  --hz-on-ink-rule:rgba(255,255,255,.18);

  /* type */
  --hz-font:"Hovarns Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hz-track-display:-0.038em;   /* the wordmark's tracking */
  --hz-w-text:400;
  --hz-w-strong:600;
  --hz-w-display:900;
  --hz-size-display:clamp(2.75rem,11vw,10rem);
  --hz-size-h2:clamp(2.5rem,7.3vw,6.5rem);
  --hz-size-h3:clamp(1.875rem,3.9vw,3.5rem);
  --hz-size-lede:clamp(1.3rem,2.35vw,2.15rem);
  --hz-size-body:1rem;
  --hz-size-small:.875rem;
  --hz-lh-display:.92;
  --hz-lh-body:1.55;
  --hz-stop:.196em;              /* full-stop diameter relative to the type it ends */

  /* space & shape */
  --hz-gutter:clamp(14px,1.9vw,28px);
  --hz-bar-pad:clamp(12px,1.5vw,22px);
  --hz-bar-h:56px;
  --hz-section:clamp(64px,8.5vw,128px);
  --hz-radius-control:2px;
  --hz-radius-frame:6px;
  --hz-radius-mark:12px;
  --hz-control-h:52px;

  /* motion */
  --hz-ease:cubic-bezier(.16,1,.3,1);   /* expo-out */
  --hz-dur:.45s;
}

/* Opt-in helpers (class-scoped, no element resets) */
.hz-stop{display:inline-block;width:var(--hz-stop);height:var(--hz-stop);margin-left:.06em;border-radius:999px;background:var(--hz-red);vertical-align:baseline}
.hz-display{font-family:var(--hz-font);font-weight:var(--hz-w-display);letter-spacing:var(--hz-track-display);line-height:var(--hz-lh-display)}
.hz-btn{display:inline-flex;align-items:center;gap:12px;min-height:var(--hz-control-h);padding:0 22px;background:var(--hz-ink);color:#fff;font:var(--hz-w-strong) 1rem/1 var(--hz-font);letter-spacing:-.01em;text-decoration:none;border:0;border-radius:var(--hz-radius-control);cursor:pointer}
.hz-btn::after{content:"";width:9px;height:9px;border-radius:9px;background:var(--hz-red);transition:width var(--hz-dur) var(--hz-ease)}
.hz-btn:hover::after{width:26px}
.hz-focus:focus-visible,.hz-btn:focus-visible{outline:2px solid var(--hz-red);outline-offset:3px}