/* _variables.css */
:root {

	--font-size: 20;
	--line-height: calc( 24 / 20 );

	--color-accent:   var(--color-accent-template, #000000 );
	--color-header: var(--color-accent-header, #000000 );

	--color-white: 	  #ffffff;
	--color-black: 	  #000000;
	--color-grey-200: #545454;
	--color-grey-400: #868686;
	--color-grey-600: #BDBDBD; 
	--color-grey-800: #F4F0F0; 
	--color-grey-900: #F9F7F7; 

	/* Coloriuris logo colors */
	--color-yellow:	   #fbc707;
	--color-blue:	  #1C63B7;
	--color-red:	  #ED1C24;
	--color-green:	  #80CC28;



	--space-10:  clamp( calc( 1rem *  8 / var(--font-size) ),  1vw ,calc( 1rem *  10 / var(--font-size) ) );
	--space-20:  clamp( calc( 1rem * 16 / var(--font-size) ),  2vw ,calc( 1rem *  20 / var(--font-size) ) );
	--space-40:  clamp( calc( 1rem * 20 / var(--font-size) ),  4vw ,calc( 1rem *  40 / var(--font-size) ) );
	--space-80:  clamp( calc( 1rem * 40 / var(--font-size) ),  8vw ,calc( 1rem *  80 / var(--font-size) ) );
	--space-120: clamp( calc( 1rem * 60 / var(--font-size) ), 12vw ,calc( 1rem * 120 / var(--font-size) ) );
	--space-160: clamp( calc( 1rem * 80 / var(--font-size) ), 16vw ,calc( 1rem * 160 / var(--font-size) ) );
	--space-200: clamp( calc( 1rem * 100 / var(--font-size) ), 20vw ,calc( 1rem * 200 / var(--font-size) ) );

	--gap-10: clamp( calc( 1rem *  8 / var(--font-size) ), 1vmax ,calc( 1rem * 10 / var(--font-size) ) );
	--gap-20: clamp( calc( 1rem * 16 / var(--font-size) ), 2vmax ,calc( 1rem * 20 / var(--font-size) ) );
	--gap-40: clamp( calc( 1rem * 20 / var(--font-size) ), 4vmax ,calc( 1rem * 40 / var(--font-size) ) );


	--width-1col:   100px;
	--width-2col:   220px;
	--width-3col:   340px;
	--width-4col:   460px;
	--width-5col:   580px;
	--width-6col:   700px;
	--width-8col:   940px;
	--width-12col: 1420px;


	--text-h1: clamp( calc( 1rem * 54 / var(--font-size) ), 4vw, calc( 1rem * 54 / var(--font-size) ) );
	--text-h1-legales: clamp( calc( 0.8rem * 40 / var(--font-size) ), 4vw, calc( 0.8rem * 40 / var(--font-size) ) );
	--text-h1-line-height: calc( 58 / 54 );

	--text-h2: clamp( calc( 1rem * 30 / var(--font-size) ), 4vw, calc( 1rem * 48 / var(--font-size) ) );
	--text-h2-legales: clamp( calc( 0.75rem * 30 / var(--font-size) ), 4vw, calc( 0.75rem * 30 / var(--font-size) ) );
	--text-h2-line-height: calc( 48 / 40 );

	--text-h3-legales: clamp( calc( 0.75rem * 28 / var(--font-size) ), 4vw, calc( 0.75rem * 28 / var(--font-size) ) );

	--text-h4-legales: clamp( calc( 0.75rem * 26 / var(--font-size) ), 4vw, calc( 0.75rem * 26 / var(--font-size) ) );

	--text-h5-legales: clamp( calc( 0.75rem * 22 / var(--font-size) ), 4vw, calc( 0.75rem * 22 / var(--font-size) ) );

	--text-xl: clamp( calc( 1rem * 20 / var(--font-size) ), 4vw, calc( 1rem * 24 / var(--font-size) ) );
	--text-xl-line-height: calc( 30 / 24 );

	--text-default: clamp( calc( 1rem * 16 / var(--font-size) ), 4vw, calc( 1rem * 20 / var(--font-size) ) );
	--text-default-line-height: var(--line-height);

	--text-s: clamp( calc( 1rem * 12 / var(--font-size) ), 4vw, calc( 1rem * 16 / var(--font-size) ) );
	--text-s-line-height: calc( 20 / 16 );

	--text-xs: clamp( calc( 1rem * 10 / var(--font-size) ), 4vw, calc( 1rem * 12 / var(--font-size) ) );
	--text-xs-line-height: calc( 12 / 15 );

	--font-sans-serif: 'DM Sans', serif;
	
	--font-serif: 'Astonpoliz Regular', sans-serif;

	--mediaquery-tablet:   '640px';
	--mediaquery-laptop:  '1024px';
	--mediaquery-desktop: '1440px';

}