/**
 * variables.css
 *
 * All variables used throughout the theme
 *
**/

:root {
	/* Site grid gutters */
	--size__site-gutter: 20px;

	/* Site max width */
	--size__max-site-width-wide: 985px;
	--size__max-site-width-full: 100vw;

	/* Sidebar */
	--size__sidebar-width: 260px;
	--size__inline-gutters: 5px;

	/* Site-wide border-radius */
	/* --size__border-radius-extrasmall: 3px; */
	--size__border-radius-small: 8px;
	--size__border-radius-medium: 10px;
    --size__border-radius-normal: 20px;
	/* --size__border-radius-large: 25px; */

    /* box shadow */
    --box-shadow: 0px 0px 10px -4px rgba(0, 0, 0, 0.5);
    --box-shadow-big: 0px 0px 10px -2px rgba(0, 0, 0, 0.5);
    --box-shadow-huge: 7px 7px 5px -1px rgba(0, 0, 0, .5);

	/* Site-wide font settings */
	--font-family-roboto: 'Roboto', sans-serif;
	--font-family-markot: 'MarkOT', sans-serif;

	/* Site Grid columns */
	--mobile-grid:
		[full-start] var(--size__site-gutter)
		[content-start] 1fr
		[content-end] var(--size__site-gutter)
		[full-end];

	--desktop-grid:
		[full-start] var(--size__site-gutter)
		[wide-start] 1fr
		[content-start] var(--size__max-site-width-wide)
		[content-end] 1fr
		[wide-end] var(--size__site-gutter)
		[full-end];

	--sidebar-content-grid:
		[sidebar-start] var(--size__sidebar-width)
		[sidebar-end] calc(var(--size__inline-gutters) * 2)
		[content-start] 1fr
		[content-end];

    --content-sidebar-grid:
        [content-start] 1fr
        [content-end] calc(var(--size__inline-gutters) * 2)
        [sidebar-start] var(--size__sidebar-width)
        [sidebar-end];


	/* Font-sizes in theme.json */
	/* @link https://utopia.fyi/blog/css-modular-scales/ */
    /* @link https://utopia.fyi/type/calculator?c=320,13,1.067,1110,14,1.125,10,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

    --step--2: clamp(0.6914rem, 0.7227rem + -0.0452vw, 0.7137rem);
    --step--1: clamp(0.7615rem, 0.7549rem + 0.033vw, 0.7778rem);
    --step-0: clamp(0.8125rem, 0.7872rem + 0.1266vw, 0.875rem);
    --step-1: clamp(0.8669rem, 0.8194rem + 0.2378vw, 0.9844rem);
    --step-2: clamp(0.925rem, 0.8511rem + 0.3694vw, 1.1074rem);
    --step-3: clamp(0.987rem, 0.8821rem + 0.5243vw, 1.2458rem);
    --step-4: clamp(1.0531rem, 0.912rem + 0.7057vw, 1.4016rem);
    --step-5: clamp(1.1237rem, 0.9402rem + 0.9177vw, 1.5768rem);
    --step-6: clamp(1.199rem, 0.9661rem + 1.1644vw, 1.7739rem);
    --step-7: clamp(1.2793rem, 0.9892rem + 1.4507vw, 1.9956rem);
    --step-8: clamp(1.365rem, 1.0085rem + 1.7824vw, 2.2451rem);
    --step-9: clamp(1.4565rem, 1.0234rem + 2.1655vw, 2.5257rem);
    --step-10: clamp(1.5541rem, 1.0326rem + 2.6073vw, 2.8414rem);

	/********* Space */

	--size__space-tiny: 5px;
	--size__space-small: 10px;
    --size__space-medium-small: 15px;
	--size__space-normal: 20px;
	--size__space-medium: 30px;
	--size__space-medium-large: 40px;
    --size__space-medium-larger: 50px;
	--size__space-large: 60px;

	/********* Colors */

	/* White */
	--color-alpha: #fff;
	--color-alpha-hsl: 120 89% 100%;
	/* Red */
	--color-bravo: #a50f07;
    --color-bravo-light: rgba(165, 16, 8, 0.25); /* 25% opacity */
    /* Blue */
    --color-charlie: #2f5774;
    --color-charlie-medium: #9FB2C0;
	--color-charlie-light: rgba(47, 87,117, 0.1); /* 10% opacity */
	/* Green */
	--color-delta: #294700;

}

@media screen and (min-width: 768px) {
	
	:root {
		--size__site-gutter: 50px;

		--size__inline-gutters: 10px;
	}

}

@media screen and (min-width: 1110px) {

	:root {
		--size__site-gutter: 1.5fr;

		--size__inline-gutters: 15px;
	}

}