/* Radii, borders, elevation, motion.
   The website is deliberately square: buttons, chips, cards and images all
   have sharp corners. The only rounded things are form fields (4px) and the
   burger button (20px on a 60px square). The style guide's own example cards
   use 22px, and its colour swatches 5.216px. */
:root{
  --hg-radius-none:0;
  --hg-radius-field:4px;
  --hg-radius-swatch:5.216px;
  --hg-radius-burger:20px;
  --hg-radius-card-guide:22px;
  --hg-radius-pill:999px;

  --hg-border-width:1px;
  --hg-field-border:1px solid var(--hg-border-field);
  --hg-rule:1px solid var(--hg-border-subtle);

  /* Elevation: the site uses almost none. Flyout menus get a soft drop only. */
  --hg-shadow-none:none;
  --hg-shadow-header:0 2px 10px rgba(0,0,0,0.10);
  --hg-shadow-flyout:0 6px 18px rgba(0,0,0,0.12);
  --hg-shadow-drawer:-4px 0 24px rgba(0,0,0,0.18);

  /* Protection: hero headlines sit on photography with a light scrim */
  --hg-scrim-hero:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,0.35) 100%); /* @kind other */
  --hg-scrim-card:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,0.55) 100%); /* @kind other */

  --hg-duration:300ms; /* @kind other */
  --hg-duration-fast:150ms; /* @kind other */
  --hg-ease:ease; /* @kind other */
  --hg-transition:all var(--hg-duration) var(--hg-ease);
}