julienmonnerie/assets/css/partials/variables.scss

// ----------------------------------------------------------------------------
// VARIABLES
// ----------------------------------------------------------------------------

:root {

	// Fonts

	--text-font-family: Helvetica, sans-serif;
	--title-font-family: Helvetica, sans-serif;
	--regular-font-weight: 400;
	--medium-font-weight: 500;
	--semi-bold-font-weight: 600;
	--bold-font-weight: 700;
	--text-font-size: 1rem;
	--text-line-height: calc(var(--text-font-size) * 1.2);
	--footnote-font-size: 0.8rem;
	--footnote-line-height: calc(var(--footnote-font-size) * 1.2);
	--h1-font-size: 1.6rem;
	--h1-line-height: calc(var(--h1-font-size) * 1.2);
	--h2-font-size: 1.4rem;
	--h2-line-height: calc(var(--h2-font-size) * 1.2);
	--h3-font-size: 1.2rem;
	--h3-line-height: calc(var(--h3-font-size) * 1.2);

	// Dimensions

	--logo-width: 6rem;
	--logo-height: 3rem;
	--logo-padding: 1rem;
	--icon-size: 2.25rem;
	--sidebar-padding: 1rem;

	// Colors

	--black: #000;
	--transparent-black: rgba(0, 0, 0, 0.3);
	--white: #fff;
	--transparent-white: rgba(255, 255, 255, 0.9);
	--feldgrau: #4B6259;
	--transparent-feldgrau: rgba(75, 98, 89, 0.9);
}

// Media queries

$tablet-media-query: 48rem;
$desktop-media-query: 62rem;