/* Typography */

:root {
  --min-font-size-xs: calc(var(--min-font-size-sm) / var(--min-typescale));
  --min-font-size-sm: calc(1rem / var(--min-typescale));
  --min-font-size-md: 1rem;
  --min-font-size-lg: calc(1rem * var(--min-typescale));
  --min-font-size-xl: calc(var(--min-font-size-lg) * var(--min-typescale));
  --min-font-size-2x: calc(var(--min-font-size-xl) * var(--min-typescale));
  --min-font-size-3x: calc(var(--min-font-size-2x) * var(--min-typescale));
  --min-font-size-4x: calc(var(--min-font-size-3x) * var(--min-typescale));
  --min-font-size-5x: calc(var(--min-font-size-4x) * var(--min-typescale));
  --min-font-size-6x: calc(var(--min-font-size-5x) * var(--min-typescale));

  /* Generate in PHP using MaxREM/90REM with VW unit added */
  --pref-font-size-xs: calc(var(--pref-font-size-sm) / var(--typescale));
  --pref-font-size-sm: calc(1vw / var(--typescale));
  --pref-font-size-md: calc(1vw / 90);
  --pref-font-size-lg: calc(1vw * var(--typescale));
  --pref-font-size-xl: calc(var(--pref-font-size-lg) * var(--typescale));
  --pref-font-size-2x: calc(var(--pref-font-size-xl) * var(--typescale));
  --pref-font-size-3x: calc(var(--pref-font-size-2x) * var(--typescale));
  --pref-font-size-4x: calc(var(--pref-font-size-3x) * var(--typescale));
  --pref-font-size-5x: calc(var(--pref-font-size-4x) * var(--typescale));
  --pref-font-size-6x: calc(var(--pref-font-size-5x) * var(--typescale));

  --max-font-size-xs: calc(var(--max-font-size-sm) / var(--typescale));
  --max-font-size-sm: calc(1rem / var(--typescale));
  --max-font-size-md: 1rem;
  --max-font-size-lg: calc(1rem * var(--typescale));
  --max-font-size-xl: calc(var(--max-font-size-lg) * var(--typescale));
  --max-font-size-2x: calc(var(--max-font-size-xl) * var(--typescale));
  --max-font-size-3x: calc(var(--max-font-size-2x) * var(--typescale));
  --max-font-size-4x: calc(var(--max-font-size-3x) * var(--typescale));
  --max-font-size-5x: calc(var(--max-font-size-4x) * var(--typescale));
  --max-font-size-6x: calc(var(--max-font-size-5x) * var(--typescale));
}

html {
  font-size: 16px;
}

body {
  font-family: system-ui, sans-serif;
  font-weight: normal;
  margin: 0 auto;
  color: var(--neutral-800);
}

.text-base-50 {
	color:var(--base-50)
}

.text-base-100 {
	color:var(--base-100)
}

.text-base-200 {
	color:var(--base-200)
}

.text-base-300 {
	color:var(--base-300)
}

.text-base-400 {
	color:var(--base-400)
}

.text-base-500 {
	color:var(--base-500)
}

.text-base-600 {
	color:var(--base-600)
}

.text-base-700 {
	color:var(--base-700)
}

.text-base-800 {
	color:var(--base-800)
}

.text-base-900 {
	color:var(--base-900)
}

.text-base-950 {
	color:var(--base-950)
}

/* Display Typography */

.display {
    font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
    font-weight: normal;
    color: var(--base-800);

  --typescale: var(--perfect-fourth);
  --min-typescale: var(--minor-second);

  --min-font-size-xs: calc(var(--min-font-size-sm) / var(--min-typescale));
  --min-font-size-sm: calc(1rem / var(--min-typescale));
  --min-font-size-md: 1rem;
  --min-font-size-lg: calc(1rem * var(--min-typescale));
  --min-font-size-xl: calc(var(--min-font-size-lg) * var(--min-typescale));
  --min-font-size-2x: calc(var(--min-font-size-xl) * var(--min-typescale));
  --min-font-size-3x: calc(var(--min-font-size-2x) * var(--min-typescale));
  --min-font-size-4x: calc(var(--min-font-size-3x) * var(--min-typescale));
  --min-font-size-5x: calc(var(--min-font-size-4x) * var(--min-typescale));
  --min-font-size-6x: calc(var(--min-font-size-5x) * var(--min-typescale));

  /* Generate in PHP using MaxREM/90REM with VW unit added */
  --pref-font-size-xs: calc(var(--pref-font-size-sm) / var(--typescale));
  --pref-font-size-sm: calc(1vw / var(--typescale));
  --pref-font-size-md: calc(1vw / 90);
  --pref-font-size-lg: calc(1vw * var(--typescale));
  --pref-font-size-xl: calc(var(--pref-font-size-lg) * var(--typescale));
  --pref-font-size-2x: calc(var(--pref-font-size-xl) * var(--typescale));
  --pref-font-size-3x: calc(var(--pref-font-size-2x) * var(--typescale));
  --pref-font-size-4x: calc(var(--pref-font-size-3x) * var(--typescale));
  --pref-font-size-5x: calc(var(--pref-font-size-4x) * var(--typescale));
  --pref-font-size-6x: calc(var(--pref-font-size-5x) * var(--typescale));

  --max-font-size-xs: calc(var(--max-font-size-sm) / var(--typescale));
  --max-font-size-sm: calc(1rem / var(--typescale));
  --max-font-size-md: 1rem;
  --max-font-size-lg: calc(1rem * var(--typescale));
  --max-font-size-xl: calc(var(--max-font-size-lg) * var(--typescale));
  --max-font-size-2x: calc(var(--max-font-size-xl) * var(--typescale));
  --max-font-size-3x: calc(var(--max-font-size-2x) * var(--typescale));
  --max-font-size-4x: calc(var(--max-font-size-3x) * var(--typescale));
  --max-font-size-5x: calc(var(--max-font-size-4x) * var(--typescale));
  --max-font-size-6x: calc(var(--max-font-size-5x) * var(--typescale));

  h1 {
    color: var(--base-950);
    font-size: clamp(
      var(--min-font-size-5x),
      var(--pref-font-size-5x),
      var(--max-font-size-5x)
    );
  }
  
  h2 {
    color: var(--base-950);
    font-size: clamp(
      var(--min-font-size-4x),
      var(--pref-font-size-4x),
      var(--max-font-size-4x)
    );
  }
  
  h3 {
    color: var(--base-950);
    font-size: clamp(
      var(--min-font-size-3x),
      var(--pref-font-size-3x),
      var(--max-font-size-3x)
    );
  }
  
  h4 {
    color: var(--base-900);
    font-size: clamp(
      var(--min-font-size-2x),
      var(--pref-font-size-2x),
      var(--max-font-size-2x)
    );
  }
  
  h5 {
    color: var(--base-900);
    font-size: clamp(
      var(--min-font-size-xl),
      var(--pref-font-size-xl),
      var(--max-font-size-xl)
    );
  }
  
  h6 {
    color: var(--base-900);
    font-size: clamp(
      var(--min-font-size-lg),
      var(--pref-font-size-lg),
      var(--max-font-size-lg)
    );
  }

  .text-xl {
    font-size: clamp(
      var(--min-font-size-xl),
      var(--pref-font-size-xl),
      var(--max-font-size-xl)
    );
  }
  
  .text-lg {
    font-size: clamp(
      var(--min-font-size-lg),
      var(--pref-font-size-lg),
      var(--max-font-size-lg)
    );
  }
  
  .text-md {
    font-size: clamp(
      var(--min-font-size-md),
      var(--pref-font-size-md),
      var(--max-font-size-md)
    );
  }
  
  .text-sm {
    font-size: clamp(
      var(--min-font-size-sm),
      var(--pref-font-size-sm),
      var(--max-font-size-sm)
    );
  }
  
  .text-xs {
    font-size: clamp(
      var(--min-font-size-xs),
      var(--pref-font-size-xs),
      var(--max-font-size-xs)
    );
  }
}

/* Post Typography */

.post {
    font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
    font-weight: normal;
    color: var(--base-800);

  --typescale: var(--minor-third);
  --min-typescale: var(--minor-second);

  --min-font-size-xs: calc(var(--min-font-size-sm) / var(--min-typescale));
  --min-font-size-sm: calc(1rem / var(--min-typescale));
  --min-font-size-md: 1rem;
  --min-font-size-lg: calc(1rem * var(--min-typescale));
  --min-font-size-xl: calc(var(--min-font-size-lg) * var(--min-typescale));
  --min-font-size-2x: calc(var(--min-font-size-xl) * var(--min-typescale));
  --min-font-size-3x: calc(var(--min-font-size-2x) * var(--min-typescale));
  --min-font-size-4x: calc(var(--min-font-size-3x) * var(--min-typescale));
  --min-font-size-5x: calc(var(--min-font-size-4x) * var(--min-typescale));
  --min-font-size-6x: calc(var(--min-font-size-5x) * var(--min-typescale));

  /* Generate in PHP using MaxREM/90REM with VW unit added */
  --pref-font-size-xs: calc(var(--pref-font-size-sm) / var(--typescale));
  --pref-font-size-sm: calc(1vw / var(--typescale));
  --pref-font-size-md: calc(1vw / 90);
  --pref-font-size-lg: calc(1vw * var(--typescale));
  --pref-font-size-xl: calc(var(--pref-font-size-lg) * var(--typescale));
  --pref-font-size-2x: calc(var(--pref-font-size-xl) * var(--typescale));
  --pref-font-size-3x: calc(var(--pref-font-size-2x) * var(--typescale));
  --pref-font-size-4x: calc(var(--pref-font-size-3x) * var(--typescale));
  --pref-font-size-5x: calc(var(--pref-font-size-4x) * var(--typescale));
  --pref-font-size-6x: calc(var(--pref-font-size-5x) * var(--typescale));

  --max-font-size-xs: calc(var(--max-font-size-sm) / var(--typescale));
  --max-font-size-sm: calc(1rem / var(--typescale));
  --max-font-size-md: 1rem;
  --max-font-size-lg: calc(1rem * var(--typescale));
  --max-font-size-xl: calc(var(--max-font-size-lg) * var(--typescale));
  --max-font-size-2x: calc(var(--max-font-size-xl) * var(--typescale));
  --max-font-size-3x: calc(var(--max-font-size-2x) * var(--typescale));
  --max-font-size-4x: calc(var(--max-font-size-3x) * var(--typescale));
  --max-font-size-5x: calc(var(--max-font-size-4x) * var(--typescale));
  --max-font-size-6x: calc(var(--max-font-size-5x) * var(--typescale));

  h1 {
    color: var(--base-950);
    font-size: clamp(
      var(--min-font-size-5x),
      var(--pref-font-size-5x),
      var(--max-font-size-5x)
    );
  }
  
  h2 {
    color: var(--base-950);
    font-size: clamp(
      var(--min-font-size-4x),
      var(--pref-font-size-4x),
      var(--max-font-size-4x)
    );
  }
  
  h3 {
    color: var(--base-950);
    font-size: clamp(
      var(--min-font-size-3x),
      var(--pref-font-size-3x),
      var(--max-font-size-3x)
    );
  }
  
  h4 {
    color: var(--base-900);
    font-size: clamp(
      var(--min-font-size-2x),
      var(--pref-font-size-2x),
      var(--max-font-size-2x)
    );
  }
  
  h5 {
    color: var(--base-900);
    font-size: clamp(
      var(--min-font-size-xl),
      var(--pref-font-size-xl),
      var(--max-font-size-xl)
    );
  }
  
  h6 {
    color: var(--base-900);
    font-size: clamp(
      var(--min-font-size-lg),
      var(--pref-font-size-lg),
      var(--max-font-size-lg)
    );
  }

  .text-xl {
    font-size: clamp(
      var(--min-font-size-xl),
      var(--pref-font-size-xl),
      var(--max-font-size-xl)
    );
  }
  
  .text-lg {
    font-size: clamp(
      var(--min-font-size-lg),
      var(--pref-font-size-lg),
      var(--max-font-size-lg)
    );
  }
  
  .text-md {
    font-size: clamp(
      var(--min-font-size-md),
      var(--pref-font-size-md),
      var(--max-font-size-md)
    );
  }
  
  .text-sm {
    font-size: clamp(
      var(--min-font-size-sm),
      var(--pref-font-size-sm),
      var(--max-font-size-sm)
    );
  }
  
  .text-xs {
    font-size: clamp(
      var(--min-font-size-xs),
      var(--pref-font-size-xs),
      var(--max-font-size-xs)
    );
  }
}

/* UI Typography */

.ui {
--ui-font-family: system-ui, sans-serif;
--ui-font-weight: normal;
  
--typescale: var(--major-second);
--min-typescale: var(--minor-second);

--min-font-size-xs: calc(var(--min-font-size-sm) / var(--min-typescale));
--min-font-size-sm: calc(1rem / var(--min-typescale));
--min-font-size-md: 1rem;
--min-font-size-lg: calc(1rem * var(--min-typescale));
--min-font-size-xl: calc(var(--min-font-size-lg) * var(--min-typescale));
--min-font-size-2x: calc(var(--min-font-size-xl) * var(--min-typescale));
--min-font-size-3x: calc(var(--min-font-size-2x) * var(--min-typescale));
--min-font-size-4x: calc(var(--min-font-size-3x) * var(--min-typescale));
--min-font-size-5x: calc(var(--min-font-size-4x) * var(--min-typescale));
--min-font-size-6x: calc(var(--min-font-size-5x) * var(--min-typescale));

/* Generate in PHP using MaxREM/90REM with VW unit added */
--pref-font-size-xs: calc(var(--pref-font-size-sm) / var(--typescale));
--pref-font-size-sm: calc(1vw / var(--typescale));
--pref-font-size-md: calc(1vw / 90);
--pref-font-size-lg: calc(1vw * var(--typescale));
--pref-font-size-xl: calc(var(--pref-font-size-lg) * var(--typescale));
--pref-font-size-2x: calc(var(--pref-font-size-xl) * var(--typescale));
--pref-font-size-3x: calc(var(--pref-font-size-2x) * var(--typescale));
--pref-font-size-4x: calc(var(--pref-font-size-3x) * var(--typescale));
--pref-font-size-5x: calc(var(--pref-font-size-4x) * var(--typescale));
--pref-font-size-6x: calc(var(--pref-font-size-5x) * var(--typescale));

--max-font-size-xs: calc(var(--max-font-size-sm) / var(--typescale));
--max-font-size-sm: calc(1rem / var(--typescale));
--max-font-size-md: 1rem;
--max-font-size-lg: calc(1rem * var(--typescale));
--max-font-size-xl: calc(var(--max-font-size-lg) * var(--typescale));
--max-font-size-2x: calc(var(--max-font-size-xl) * var(--typescale));
--max-font-size-3x: calc(var(--max-font-size-2x) * var(--typescale));
--max-font-size-4x: calc(var(--max-font-size-3x) * var(--typescale));
--max-font-size-5x: calc(var(--max-font-size-4x) * var(--typescale));
--max-font-size-6x: calc(var(--max-font-size-5x) * var(--typescale));

  font-family: var(--ui-font-family);
  /* font-weight: var(--ui-font-weight); */
  color: var(--base-800);

h1 {
  color: var(--base-950);
  font-family: var(--ui-font-family);
  /* font-weight: var(--ui-font-weight); */
  font-size: clamp(
    var(--min-font-size-5x),
    var(--pref-font-size-5x),
    var(--max-font-size-5x)
  );
}

h2 {
  color: var(--base-950);
  font-family: var(--ui-font-family);
  /* font-weight: var(--ui-font-weight); */
  font-size: clamp(
    var(--min-font-size-4x),
    var(--pref-font-size-4x),
    var(--max-font-size-4x)
  );
}

h3 {
  color: var(--base-950);
  font-family: var(--ui-font-family);
  /* font-weight: var(--ui-font-weight); */
  font-size: clamp(
    var(--min-font-size-3x),
    var(--pref-font-size-3x),
    var(--max-font-size-3x)
  );
}

h4 {
  color: var(--base-900);
  font-family: var(--ui-font-family);
  /* font-weight: var(--ui-font-weight); */
  font-size: clamp(
    var(--min-font-size-2x),
    var(--pref-font-size-2x),
    var(--max-font-size-2x)
  );
}

h5 {
  color: var(--base-900);
  font-family: var(--ui-font-family);
  /* font-weight: var(--ui-font-weight); */
  font-size: clamp(
    var(--min-font-size-xl),
    var(--pref-font-size-xl),
    var(--max-font-size-xl)
  );
}

h6 {
  color: var(--base-900);
  font-family: var(--ui-font-family);
  /* font-weight: var(--ui-font-weight); */
  font-size: clamp(
    var(--min-font-size-lg),
    var(--pref-font-size-lg),
    var(--max-font-size-lg)
  );
}

.text-2x {
  font-family: var(--ui-font-family);
  /* font-weight: var(--ui-font-weight); */
  font-size: clamp(
    var(--min-font-size-2x),
    var(--pref-font-size-2x),
    var(--max-font-size-2x)
  );
}

.text-xl {
  font-family: var(--ui-font-family);
  /* font-weight: var(--ui-font-weight); */
  font-size: clamp(
    var(--min-font-size-xl),
    var(--pref-font-size-xl),
    var(--max-font-size-xl)
  );
}

.text-lg {
  font-family: var(--ui-font-family);
  /* font-weight: var(--ui-font-weight); */
  font-size: clamp(
    var(--min-font-size-lg),
    var(--pref-font-size-lg),
    var(--max-font-size-lg)
  );
}

.text-md {
  font-family: var(--ui-font-family);
  /* font-weight: var(--ui-font-weight); */
  font-size: clamp(
    var(--min-font-size-md),
    var(--pref-font-size-md),
    var(--max-font-size-md)
  );
}

.text-sm {
  font-family: var(--ui-font-family);
  /* font-weight: var(--ui-font-weight); */
  font-size: clamp(
    var(--min-font-size-sm),
    var(--pref-font-size-sm),
    var(--max-font-size-sm)
  );
}

.text-xs {
  font-family: var(--ui-font-family);
  /* font-weight: var(--ui-font-weight); */
  font-size: clamp(
    var(--min-font-size-xs),
    var(--pref-font-size-xs),
    var(--max-font-size-xs)
  );
}

a {
  text-decoration:none;
}

}