/* Shared Hero adapter: Brivo (family: saas). CONTRACT.md §2/§3.
   Copied from ~/.claude/skills/brivo/tokens.css (:root, .t-h1, .t-lead + the 900/480 steps), brivo.css (.frame, .btn / .btn--sm /
   .btn--line, .v-plan .btn--line, .vh-d__head .btn, .site-head, .live, .note, .hero__field) and pages/index.html. Brivo natively
   defines --bg --surface --surface-2 --text --text-2 --muted --line --on-dark --accent --on-accent --accent-ink --font-display
   --font --r-sm --r --r-lg --r-pill --container --gutter (white page, ink text, charcoal bands, a saffron gradient field), so only
   the aliases below are added. */
:root {
  /* (a) aliases for contract tokens Brivo lacks */
  --ink-bg: var(--deep);                /* the charcoal band #262626 (security, infrastructure, footer) */
  --star: var(--text);                  /* rating stars are ink (proof cell "Rated 4.8") */
  --font-label: var(--font);            /* labels are Onest too: one geometric sans for everything */

  /* (b) voice: .t-h1 60px (≤900: 46px, ≤480: 38px), lh 1.02, -1.8px, Onest 500, ink, never italic; .t-lead 18/500 --text-2;
     the label is the small grey line (.live: 15px 500 --text-2, sentence case), never a chip or uppercase eyebrow */
  --display-size: 60px; --display-size-sm: 38px;
  --display-weight: 500; --display-lh: 1.02; --display-tracking: -1.8px; --display-em: normal;
  --lead-size: 18px; --body-weight: 500;
  --label-size: 15px; --label-tracking: 0; --label-transform: none; --label-weight: 500;

  /* (c) shape + nav */
  --r-hero: var(--r-xl);                /* 20px: the app frame / inset field radius (hero-a); cells themselves are square */
  --nav-offset: 72px;                   /* .site-head: sticky 72px white bar with a bottom hairline, in flow */
  --hero-tuck: 0px;                     /* never slides under the bar */
  --hero-pad-top: 48px;                 /* boxed heroes: gap under the bar's hairline */
}
@media (max-width: 900px) { :root { --display-size: 46px; --display-tracking: -1.4px; --lead-size: 17px; } }
@media (max-width: 767px) { :root { --hero-pad-top: 32px; } }
@media (max-width: 480px) { :root { --display-tracking: -1.1px; } }

/* (d) Brivo's label is the grey .live line (15px 500 --text-2), no chip fill, no caps. */
[data-host-skill="brivo"] .sh-eyebrow { color: var(--text-2); background: none; border: 0; padding: 0; }
[data-host-skill="brivo"] h1 { color: var(--text); }

/* (e) buttons: the ink .btn is 48px r12; Brivo's .btn--line is a 40px utility button, so beside a hero's 48px primary it takes
   the plan-card size (brivo.css .v-plan .btn--line: 48px, r12, 16px). The light button for photo / charcoal heroes is the white
   button Brivo uses on charcoal (.vh-d__head .btn / .vh-d__copy .btn). */
[data-host-skill="brivo"] .btn--line { height: 48px; padding: 0 20px; border-radius: var(--r); font-size: 16px; }
[data-host-skill="brivo"] .btn--light { background: var(--bg); color: var(--text); }
[data-host-skill="brivo"] .btn--light:hover { background: var(--surface-2); }

/* (f) the frame: every Brivo section draws its content inside .frame (one 1280 column, two hairline rails, bands full-bleed
   behind). A borrowed hero replaces the gold section.hero and sits OUTSIDE the frame: its own wrap is min(--container, 100% -
   2*--gutter), so the rails stop at the header's bottom hairline and pick up again at the + strip under the hero. That is the
   intended read (the hero is its own stage); heroes are never forced into the rails. */

/* (g) Brivo's mock-up colours for its lent heroes: status inks, the gradient field (pale top → saturated bottom), charcoal
   panels, coin fills, hairlines. */
:root { --sh-ok: var(--success); --sh-wait: var(--warning); --sh-alert: var(--danger); --sh-up: var(--success-ink); --sh-down: var(--danger-ink);
  --sh-field-top: var(--grad-top); --sh-field-bot: var(--grad-bot); --sh-bar: var(--grad-bot); --sh-glow-1: var(--grad-top); --sh-glow-2: var(--accent-soft); --sh-glow-3: var(--grad-bot);
  --sh-deep-2: var(--deep-2); --sh-deep-3: var(--deep-3); --sh-on-dark-2: var(--on-dark-2); --sh-line-dark: var(--line-dark); --sh-plus: var(--plus);
  --sh-grid: var(--line-2); --sh-sand: var(--surface-2); --sh-band: var(--surface); }

/* (caps) measured width of one capital in Onest 600 (heaviest loaded weight), A–Z, headless Chrome 2026-10-21. Zero specificity:
   a build's type.css (its assigned font pair) always wins. Wordmark heroes size the name from it. */
:where(:root) { --display-caps-em: 0.680; }

/* the build's assigned heading voice (type.css) — wins over the adapter's demo voice */
:root { --display-weight: 500; --display-tracking: -0.035em; --display-lh: 1.02; }