:root {
	/* Globals */
	--transparent: transparent;
	--color-primary: #2b193d;
	--color-secondary: #4c8f8e;
	--color-tertiary: #626893;
	--color-white: #f2f4ff;
    --color-black: #1c244b;
	--color-success: #4b8f8c;
    --color-danger: #f03643;
    --color-info: #2da2c9;
    --color-warning: #e7702a;

	/* Tints - Light */
	--color-primary-light-tint-20: color-mix(in srgb, var(--color-primary) 80%, var(--color-white) 20%);
	--color-primary-light-tint-40: color-mix(in srgb, var(--color-primary) 60%, var(--color-white) 40%);
	--color-primary-light-tint-60: color-mix(in srgb, var(--color-primary) 40%, var(--color-white) 60%);
	--color-primary-light-tint-80: color-mix(in srgb, var(--color-primary) 20%, var(--color-white) 80%);
	--color-secondary-light-tint-20: color-mix(in srgb, var(--color-secondary) 80%, var(--color-white) 20%);
	--color-secondary-light-tint-40: color-mix(in srgb, var(--color-secondary) 60%, var(--color-white) 40%);
	--color-secondary-light-tint-60: color-mix(in srgb, var(--color-secondary) 40%, var(--color-white) 60%);
	--color-secondary-light-tint-80: color-mix(in srgb, var(--color-secondary) 20%, var(--color-white) 80%);
	--color-tertiary-light-tint-20: color-mix(in srgb, var(--color-tertiary) 80%, var(--color-white) 20%);
	--color-tertiary-light-tint-40: color-mix(in srgb, var(--color-tertiary) 60%, var(--color-white) 40%);
	--color-tertiary-light-tint-60: color-mix(in srgb, var(--color-tertiary) 40%, var(--color-white) 60%);
	--color-tertiary-light-tint-80: color-mix(in srgb, var(--color-tertiary) 20%, var(--color-white) 80%);
	--color-black-light-tint-20: color-mix(in srgb, var(--color-black) 80%, var(--color-white) 20%);
	--color-black-light-tint-40: color-mix(in srgb, var(--color-black) 60%, var(--color-white) 40%);
	--color-black-light-tint-60: color-mix(in srgb, var(--color-black) 40%, var(--color-white) 60%);
	--color-black-light-tint-80: color-mix(in srgb, var(--color-black) 20%, var(--color-white) 80%);

	/* Tints - Dark */
	--color-primary-dark-tint-20: color-mix(in srgb, var(--color-primary) 80%, var(--color-black) 20%);
	--color-primary-dark-tint-40: color-mix(in srgb, var(--color-primary) 60%, var(--color-black) 40%);
	--color-primary-dark-tint-60: color-mix(in srgb, var(--color-primary) 40%, var(--color-black) 60%);
	--color-primary-dark-tint-80: color-mix(in srgb, var(--color-primary) 20%, var(--color-black) 80%);
	--color-secondary-dark-tint-20: color-mix(in srgb, var(--color-secondary) 80%, var(--color-black) 20%);
	--color-secondary-dark-tint-40: color-mix(in srgb, var(--color-secondary) 60%, var(--color-black) 40%);
	--color-secondary-dark-tint-60: color-mix(in srgb, var(--color-secondary) 40%, var(--color-black) 60%);
	--color-secondary-dark-tint-80: color-mix(in srgb, var(--color-secondary) 20%, var(--color-black) 80%);
	--color-tertiary-dark-tint-20: color-mix(in srgb, var(--color-tertiary) 80%, var(--color-black) 20%);
	--color-tertiary-dark-tint-40: color-mix(in srgb, var(--color-tertiary) 60%, var(--color-black) 40%);
	--color-tertiary-dark-tint-60: color-mix(in srgb, var(--color-tertiary) 40%, var(--color-black) 60%);
	--color-tertiary-dark-tint-80: color-mix(in srgb, var(--color-tertiary) 20%, var(--color-black) 80%);
	--color-white-dark-tint-20: color-mix(in srgb, var(--color-white) 80%, var(--color-black) 20%);
	--color-white-dark-tint-40: color-mix(in srgb, var(--color-white) 60%, var(--color-black) 40%);
	--color-white-dark-tint-60: color-mix(in srgb, var(--color-white) 40%, var(--color-black) 60%);
	--color-white-dark-tint-80: color-mix(in srgb, var(--color-white) 20%, var(--color-black) 80%);

	/* Layout */
	--gutter: 16px;

	/* font */
    --font-headline-lg-font-size: 80px;
    --font-headline-lg-line-height: 88px;
	--font-headline-font-size: 56px;
    --font-headline-line-height: 64px;
	--font-headline-md-font-size: 44px;
    --font-headline-md-line-height: 52px;
	--font-headline-sm-font-size: 32px;
    --font-headline-sm-line-height: 40px;
    --font-body-xlg-font-size: 24px;
    --font-body-xlg-line-height: 32px;
	--font-body-lg-font-size: 20px;
    --font-body-lg-line-height: 28px;
    --font-body-font-size: 16px;
    --font-body-line-height: 24px;
    --font-body-sm-font-size: 12px;
    --font-body-sm-line-height: 20px;

	/* font family */
	--font-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-primary: "Istok Web";
    --font-primary-stack: var(--font-primary), var(--font-fallback);
    --font-secondary: "Hind";
    --font-secondary-stack: var(--font-secondary), var(--font-fallback);
    

	/* Border Radius */
	--border-radius-4: 4px;
    --border-radius-8: 8px;
    --border-radius-12: 12px;
    --border-radius-16: 16px;
	--border-radius-24: 24px;
	--border-radius-32: 32px;
	--border-radius-56: 56px;
	--border-radius-full: 100%;

	/* Elevation */
	--elevation-1: 0 0 1px rgba(24,21,26,.05), 0 0 1px rgba(24,21,26,.1);
    --elevation-2: 0 0 2px rgba(24,21,26,.05), 0 1px 2px rgba(24,21,26,.1);
    --elevation-4: 0 0 4px rgba(24,21,26,.05), 0 2px 4px rgba(24,21,26,.1);
    --elevation-8: 0 0 8px rgba(24,21,26,.05), 0 4px 8px rgba(24,21,26,.1);
    --elevation-16: 0 0 16px rgba(24,21,26,.05), 0 8px 16px rgba(24,21,26,.1);
	--elevation-32: 0 0 32px rgba(24,21,26,.05), 0 16px 32px rgba(24,21,26,.1);
	--elevation-offset-1: 0 0 1px rgba(24,21,26,.05), 0 1px 1px rgba(24,21,26,.1);
    --elevation-offset-2: 0 0 2px rgba(24,21,26,.05), 0 2px 2px rgba(24,21,26,.1);
    --elevation-offset-4: 0 0 4px rgba(24,21,26,.05), 0 4px 4px rgba(24,21,26,.1);
    --elevation-offset-8: 0 0 8px rgba(24,21,26,.05), 0 8px 8px rgba(24,21,26,.1);
    --elevation-offset-16: 0 0 16px rgba(24,21,26,.05), 0 16px 16px rgba(24,21,26,.1);
	--elevation-offset-32: 0 0 32px rgba(24,21,26,.05), 0 32px 32px rgba(24,21,26,.1);

	/* Images / Icons */
	/* PSI Logo */
	--psi-logo: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 583 232'%3e%3crect x='141.38' y='2.83' width='26.66' height='26.61' fill='%2332a3c7'%3e%3c/rect%3e%3crect x='141.38' y='35.79' width='26.66' height='26.61' fill='%23e57d55'%3e%3c/rect%3e%3crect x='107.39' y='35.79' width='26.65' height='26.61' fill='%239bcdc3'%3e%3c/rect%3e%3crect x='73.4' y='35.79' width='26.66' height='26.61' fill='%23ed7f98'%3e%3c/rect%3e%3crect x='39.42' y='35.79' width='26.65' height='26.61' fill='%237e6aaf'%3e%3c/rect%3e%3crect x='209.34' y='68.74' width='26.66' height='26.61' fill='%237e6aaf'%3e%3c/rect%3e%3crect x='175.36' y='68.74' width='26.65' height='26.61' fill='%23ef484e'%3e%3c/rect%3e%3crect x='141.38' y='68.74' width='26.66' height='26.61' fill='%23f9a46f'%3e%3c/rect%3e%3crect x='73.4' y='68.74' width='26.66' height='26.61' fill='%23909bc6'%3e%3c/rect%3e%3crect x='39.42' y='68.74' width='26.65' height='26.61' fill='%2392cc80'%3e%3c/rect%3e%3crect x='175.36' y='101.7' width='26.65' height='26.61' fill='%2392cc80'%3e%3c/rect%3e%3crect x='141.38' y='101.7' width='26.66' height='26.61' fill='%2331abcc'%3e%3c/rect%3e%3crect x='107.39' y='101.7' width='26.65' height='26.61' fill='%233faf50'%3e%3c/rect%3e%3crect x='39.42' y='101.7' width='26.65' height='26.61' fill='%23cfbd6e'%3e%3c/rect%3e%3crect x='5.44' y='101.7' width='26.65' height='26.61' fill='%23f38084'%3e%3c/rect%3e%3crect x='39.42' y='134.66' width='26.65' height='26.61' fill='%23f58348'%3e%3c/rect%3e%3crect x='141.38' y='167.62' width='26.66' height='26.61' fill='%23f15b6b'%3e%3c/rect%3e%3crect x='107.39' y='167.62' width='26.65' height='26.61' fill='%237e6aaf'%3e%3c/rect%3e%3crect x='39.42' y='200.58' width='26.65' height='26.61' fill='%23e77534'%3e%3c/rect%3e%3crect x='5.44' y='134.66' width='26.65' height='26.61' fill='%239bcec4'%3e%3c/rect%3e%3crect x='5.44' y='200.58' width='26.65' height='26.61' fill='%2331abcc'%3e%3c/rect%3e%3cpath d='M303.65,101.28c-.07.39-.26,1.02-.26,1.64-.04,14.22.03,28.44-.14,42.65-.04,3.7,2.06,3.98,4.76,3.91,9.42-.23,18.85-.16,28.25-.77,13.09-.85,21.71-9.91,22.62-23.07.87-12.64-5.81-22.4-19.05-24.07-11.69-1.47-23.71-.31-36.17-.31M303.29,226.26h-33.83c-.09-2.02-.23-3.79-.23-5.56-.02-48.31.05-96.62-.14-144.92-.02-4.7,1.37-5.81,5.88-5.76,22.03.27,44.1-.53,66.09.45,25.03,1.11,47.2,15.57,51.31,43.11,5.32,35.56-14.02,59.07-47.59,64.1-11.85,1.78-24.1,1.13-36.16,1.23-4.05.03-5.49,1.13-5.42,5.33.24,12.07.09,24.15.09,36.23v5.8ZM544.22,147.97c0-24.14.11-48.28-.1-72.42-.04-4.43,1.25-5.76,5.61-5.57,7.77.33,15.57.22,23.35.08,3.34-.07,4.68.97,4.67,4.51-.09,49.28-.09,98.55,0,147.83,0,3.29-1.19,4.26-4.37,4.19-7.95-.18-15.91-.25-23.84.03-4.06.14-5.39-1.04-5.37-5.24.19-24.47.09-48.95.09-73.42h-.03ZM399.65,203.43c6.4-7.67,12.84-15.36,19.12-22.89,7.77,5.71,12.24,8.64,20.95,12.72,11.52,5.4,24.82,7.77,38.34,3.85,8.84-2.57,13.29-9.5,10.74-17.18-1.08-3.26-3.93-6.96-6.94-8.35-7.59-3.5-15.73-5.85-23.67-8.59-9.82-3.38-19.93-6.07-29.46-10.14-19.59-8.36-25.04-25.27-22.8-44.38,2.73-23.25,20.55-36.83,43.02-39.98,24.09-3.38,46.28,2.4,66.23,16.43.8.56,1.56,1.16,2.94,2.2-5.8,8.48-11.52,16.83-16.76,24.48-10.28-5.16-18.81-9.16-28.47-12.11-6.4-1.95-12.81-2.58-19.54-1.77-8.29,1-13.82,6.74-14.39,13-.62,6.92,2.7,12.08,11.14,15.05,9.79,3.45,19.91,5.95,29.81,9.11,5.65,1.8,11.25,3.86,16.71,6.19,21.95,9.38,29.99,27.42,25.08,50.47-4.01,18.86-16.74,30.76-34.66,35.66-28.95,7.93-64.27-2.14-87.39-23.8' fill='%23352f82'%3e%3c/path%3e%3c/svg%3e");

    /* Navigation Arrow Icon (Normal/Hovered) */
    --nav-arrow-normal: url("data:image/svg+xml;charset=UTF-8,%3csvg id='NavigationMenu' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 32 32'%3e%3crect width='32' height='32' rx='4' ry='4' fill='%23ecedef'/%3e%3cpath d='M13.97,24.8c-.64,0-1.28-.24-1.77-.73-.98-.98-.98-2.56,0-3.54l4.45-4.45-4.61-4.61c-.98-.98-.98-2.56,0-3.54.98-.98,2.56-.98,3.54,0l6.38,6.38c.98.98.98,2.56,0,3.54l-6.22,6.22c-.49.49-1.13.73-1.77.73Z' fill='%232b193c'/%3e%3c/svg%3e");
    --nav-arrow-hovered: url("data:image/svg+xml;charset=UTF-8,%3csvg id='NavigationMenu' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 32 32'%3e%3crect width='32' height='32' rx='4' ry='4' fill='%234c8f8e'/%3e%3cpath d='M13.97,24.8c-.64,0-1.28-.24-1.77-.73-.98-.98-.98-2.56,0-3.54l4.45-4.45-4.61-4.61c-.98-.98-.98-2.56,0-3.54.98-.98,2.56-.98,3.54,0l6.38,6.38c.98.98.98,2.56,0,3.54l-6.22,6.22c-.49.49-1.13.73-1.77.73Z' fill='%23f2f4fa'/%3e%3c/svg%3e");
    
	/* Navigation Close Icon (Normal/Hovered) */
    --nav-close-normal: url("data:image/svg+xml;charset=UTF-8,%3csvg id='IconClose' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 32 32'%3e%3crect width='32' height='32' rx='4' ry='4' fill='%23ecedee'/%3e%3cpath d='M16,12.46l-4.73-4.73c-.98-.98-2.56-.98-3.54,0-.98.98-.98,2.56,0,3.54l4.73,4.73-4.73,4.73c-.98.98-.98,2.56,0,3.54.98.98,2.56.98,3.54,0l4.73-4.73,4.73,4.73c.98.98,2.56.98,3.54,0,.49-.49.73-1.13.73-1.77s-.24-1.28-.73-1.77l-4.73-4.73,4.73-4.73c.49-.49.73-1.13.73-1.77s-.24-1.28-.73-1.77c-.98-.98-2.56-.98-3.54,0l-4.73,4.73Z' fill='%2316181a'/%3e%3c/svg%3e");
    --nav-close-hovered: url("data:image/svg+xml;charset=UTF-8,%3csvg id='OffCanvasClose' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 32 32'%3e%3crect width='32' height='32' rx='4' ry='4' fill='%23ecedee'/%3e%3cpath d='M19.19,16.08l4.61-4.61c.98-.98.98-2.56,0-3.54-.98-.98-2.56-.98-3.54,0l-4.27,4.27-4.27-4.27c-.98-.98-2.56-.98-3.54,0-.98.98-.98,2.56,0,3.54l4.61,4.61-4.45,4.45c-.98.98-.98,2.56,0,3.54.49.49,1.13.73,1.77.73s1.28-.24,1.77-.73l4.1-4.1,4.1,4.1c.49.49,1.13.73,1.77.73s1.28-.24,1.77-.73c.98-.98.98-2.56,0-3.54l-4.45-4.45Z' fill='%2316181a'/%3e%3c/svg%3e");
    
}