:root {
  /* for helpers */
  --sp1: 0.5rem;
  --sp2: 1rem;
  --sp3: 2rem;
  --sp4: 4rem;

  /* for styles, typography */
  --textDark: 48, 48, 48;
  --textLight: 245, 245, 245;
  /* --links: 32, 113, 94; */
  --links: 66, 104, 132;

  /* for styles */
  --pageFrame: 1320px;
  --maxWidth: 2000px;
  --padLess: 2rem;
  --padNorm: 5rem;
  --padMore: 8rem;

  --headerHeight: 0px;

  /* Typography scale helpers (used by clamp() interpolation) */
  --type-scale-min-viewport: 320px;
  --type-scale-max-viewport: var(--pageFrame);

  /* Default font families */
  /* 
  font-family: "avenir-lt-pro", sans-serif;
  font-weight: 300;
  font-weight: 700;
  font-weight: 800;

  font-family: noto-sans, sans-serif;
  font-weight: 400;
  font-weight: 700; 
  */

  --type-primary-font-family: "avenir-lt-pro", sans-serif;
  --type-secondary-font-family: noto-sans, sans-serif;

  /* Paragraph tokens */
  --type-p-font-family: var(--type-primary-font-family);
  --type-p-weight: 300;
  --type-p-size-min: 17px;
  --type-p-size-max: 17px;
  --type-p-line-height: 1.7647;
  --type-p-letter-spacing: normal;

  /* Headings: h1 */
  --type-h1-font-family: var(--type-primary-font-family);
  --type-h1-weight: 800;
  --type-h1-size-min: 45px;
  --type-h1-size-max: 64px;
  --type-h1-line-height: 1.1; /* 1.25; */
  --type-h1-letter-spacing: normal;

  /* h2 */
  --type-h2-font-family: var(--type-primary-font-family);
  --type-h2-weight: 700;
  --type-h2-size-min: 30px;
  --type-h2-size-max: 45px;
  --type-h2-line-height: 1.2222;
  --type-h2-letter-spacing: normal;

  /* h3 */
  --type-h3-font-family: var(--type-primary-font-family);
  --type-h3-weight: 700;
  --type-h3-size-min: 22px;
  --type-h3-size-max: 30px;
  --type-h3-line-height: 1.5;
  --type-h3-letter-spacing: normal;

  /* h4 */
  --type-h4-font-family: var(--type-secondary-font-family);
  --type-h4-weight: 400;
  --type-h4-size-min: 22px;
  --type-h4-size-max: 30px;
  --type-h4-line-height: 1.5;
  --type-h4-letter-spacing: normal;

  /* h5 */
  --type-h5-font-family: var(--type-primary-font-family);
  --type-h5-weight: 300;
  --type-h5-size-min: 22px;
  --type-h5-size-max: 22px;
  --type-h5-line-height: 1.3636;
  --type-h5-letter-spacing: normal;

  /* h6 */
  --type-h6-font-family: var(--type-primary-font-family);
  --type-h6-weight: 700;
  --type-h6-size-min: 16px;
  --type-h6-size-max: 16px;
  --type-h6-line-height: 1.875;
  --type-h6-letter-spacing: 0.1em;

  /* Computed responsive font-size variables using clamp().
     Interpolates between min and max sizes across viewport widths.
     Formula:
       clamp(min, calc(min + (max - min) * ((100vw - minViewport) / (maxViewport - minViewport))), max)
  */

  --fs-p: clamp(
    var(--type-p-size-min), 1.33vw, var(--type-p-size-max)
  );

  --fs-h1: clamp(
    var(--type-h1-size-min), 5vw, var(--type-h1-size-max)
  );

  --fs-h2: clamp(
    var(--type-h2-size-min), 3.52vw, var(--type-h2-size-max)
  );

  --fs-h3: clamp(
    var(--type-h3-size-min), 2.34vw, var(--type-h3-size-max)
  );

  --fs-h4: clamp(
    var(--type-h4-size-min), 2.34vw, var(--type-h4-size-max)
  );

  --fs-h5: clamp(
    var(--type-h5-size-min), 1.72vw, var(--type-h5-size-max)
  );

  --fs-h6: clamp(
    var(--type-h6-size-min), 1.25vw, var(--type-h6-size-max)
  );
}