/*
---------------------------
VARIABLES
---------------------------
*/

:root {

	--max-width-desktop: 1440px;
	--max-width-medium: 1320px;
	--max-width-tablet: 1023px;
	--max-width-mobile: 640px;

	--color-primary-950: #133358;
  --color-primary-900: #185490;
  --color-primary-800: #1562B8;
  --color-primary-700: #1175D9;
  --color-primary-600: #1994F7; /* Primary */
  --color-primary-500: #30B0FF;
  --color-primary-400: #57CCFF;
  --color-primary-300: #8DE0FF;
  --color-primary-200: #BBEBFF;
  --color-primary-100: #D9F3FF;
  --color-primary-50:  #EEFAFF;

	--color-primary-950-rgb: 19, 51, 88;
  --color-primary-900-rgb: 24, 84, 144;
  --color-primary-800-rgb: 21, 98, 184;
  --color-primary-700-rgb: 17, 117, 217;
  --color-primary-600-rgb: 25, 148, 247; /* Primary */
  --color-primary-500-rgb: 48, 176, 255;
  --color-primary-400-rgb: 87, 204, 255;
  --color-primary-300-rgb: 141, 224, 255;
  --color-primary-200-rgb: 187, 235, 255;
  --color-primary-100-rgb: 217, 243, 255;
  --color-primary-50-rgb:  238, 250, 255;

	--color-text: #4c545d;
	--color-text-rgb: 88, 101, 116;
	
	--color-success: #51e392;
	--color-success-rgb: 81, 227, 146;

	--color-warning: #f7b731;
	--color-warning-rgb: 247, 183, 49;

	--color-alert: #e74c3c;
	--color-alert-rgb: 231, 76, 60;

	--color-light: #EEFAFF;
	--color-light-rgb: 227, 224, 227;

	--color-white: #fff;
	--color-white-rgb:255, 255, 255;

	--font-heading: 'Inter Tight', sans-serif;
	--font-body: 'Inter Tight', sans-serif;
	--font-special: 'Gellix', sans-serif;

	--title-huge: clamp(3.000rem, 2.1818rem + 2.1818vw, 5.000rem);
	--title-xlarge: clamp(2.0rem, 1.6364rem + 1.5341vw, 3.938rem);
	--title-large: clamp(1.750rem, 1.2727rem + 1.1545vw, 2.950rem);
	--title-medium: clamp(1.500rem, 1.0909rem + 0.8636vw, 2.250rem);
	--title-small: clamp(1.250rem, 0.9091rem + 0.5727vw, 1.550rem);
	--title-tiny: clamp(1.000rem, 0.7273rem + 0.2727vw, 1.150rem);

	--radius-tiny: 4px;
  --radius-small: 8px;
  --radius-medium: 16px;
  --radius-large: 32px;
  --radius-xlarge: 48px;
  --radius-huge: 96px;
  --radius-full: 9999px;

	--shadow-tiny: 2px 2px 5px rgba(var(--color-dark-rgb), 0.1);
	--shadow-small: 2px 2px 10px rgba(var(--color-dark-rgb), 0.1);
	--shadow-medium: 2px 2px 20px rgba(var(--color-dark-rgb), 0.1);
	--shadow-large: 2px 2px 40px rgba(var(--color-dark-rgb), 0.1);
	--shadow-xlarge: 2px 2px 80px rgba(var(--color-dark-rgb), 0.1);

	--space-tiny: 1rem;
  --space-xsmall: 1.5rem;
  --space-small: 2rem;
  --space-medium: 4rem;
  --space-large: 6rem;
  --space-xlarge: 10rem;
  --space-huge: 12rem;
}
/* Medium screens (≤ 1023px) */
@media (max-width: 1023px) {
  :root {
		--space-tiny: 0.75rem;
    --space-xsmall: 1.25rem;
    --space-small: 1.5rem;
    --space-medium: 3rem;
    --space-large: 4rem;
    --space-xlarge: 8rem;
    --space-huge: 9rem;
  }
}

/* Small screens (≤ 640px) */
@media (max-width: 640px) {
	:root {
		--radius-tiny: 4px;
		--radius-small: 6px;
		--radius-medium: 12px;
		--radius-large: 24px;
		--radius-xlarge: 36px;
		--radius-huge: 62px;

		--space-tiny: 0.5rem;
    --space-xsmall: 0.75rem;
    --space-small: 1rem;
    --space-medium: 1.66rem;
    --space-large: 2rem;
    --space-xlarge: 5rem;
    --space-huge: 8rem;
	}
}