/* IPEX ELECTRICAL shared style tokens. Change a value here and it changes across all four pages. */
:root {
  /* Brand palette from the existing brand pack */
  --black: #050607;
  --charcoal: #0B0D10;
  --silver: #C9CDD2;
  --blue: #0A84FF;
  --cyan: #00C6FB;

  /* Working shades derived from the palette */
  --white: #F3F5F7;
  --muted: #9AA1A9;
  --hairline: rgba(201, 205, 210, .18);
  --paper: #E8EAED;
  --paper-text: #3A4048;
  --paper-hairline: rgba(11, 13, 16, .18);
  --blue-on-paper: #0A55B0;

  /* Type */
  --display: "Michroma", "Eurostile", "Arial Black", sans-serif;
  --body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --h1: clamp(1.8rem, 1.1rem + 2.65vw, 3.1rem);
  --h1-page: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
  --h2: clamp(1.4rem, 1.05rem + 1.45vw, 2.2rem);
  --h3: 1.4rem;
  --lead: clamp(1.13rem, 1.05rem + .3vw, 1.3rem);

  /* Layout */
  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(56px, 8vw, 112px);

  /* The logo's cut: every button and photo corner uses it */
  --cut: 14px;
  --slant: 12px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
}