/* Chalkline Design System */

/* ? naming: {prefix}[__{element}]_{style}[--{modificator}] */

:root {
	/* Color styles */
	--primary-1000: #041d2b;
	--primary-900: #07334d;
	--primary-800: #0a4a6f;
	--primary-700: #0d6191;
	--primary-600: #0f72ab;
	--primary-500: #138fd6;
	--primary-400: #39a1dd;
	--primary-300: #5fb3e3;
	--primary-200: #84c5ea;
	--primary-100: #aad7f0;
	--secondary-1000: #0f2b14;
	--secondary-900: #1b4e24;
	--secondary-800: #287134;
	--secondary-700: #349444;
	--secondary-600: #40b654;
	--secondary-500: #4cd964;
	--secondary-400: #69df7d;
	--secondary-300: #85e596;
	--secondary-200: #a2ebae;
	--secondary-100: #bff1c7;
	--tertiary-1000: #2b1b04;
	--tertiary-900: #4d3107;
	--tertiary-800: #6f470a;
	--tertiary-700: #915c0d;
	--tertiary-600: #b47210;
	--tertiary-500: #d68813;
	--tertiary-400: #dd9b39;
	--tertiary-300: #e3ae5f;
	--tertiary-200: #eac184;
	--tertiary-100: #f0d4aa;
	--base-1000: #0a0f12;
	--base-900: #111b20;
	--base-800: #19282e;
	--base-700: #21343c;
	--base-600: #28404a;
	--base-500: #304c58;
	--base-500_rgb: 48, 76, 88;
	--base-400: #516973;
	--base-300: #72858d;
	--base-200: #93a2a8;
	--base-100: #b5bfc3;
	--base2-1000: #0a0f12;
	--base2-900: #111b20;
	--base2-800: #19282e;
	--base2-700: #21343c;
	--base2-600: #28404a;
	--base2-500: #304c58;
	--base2-400: #516973;
	--base2-300: #72858d;
	--base2-200: #93a2a8;
	--base2-100: #b5bfc3;
	--contrast-1000: #323232;
	--contrast-900: #595959;
	--contrast-800: #818181;
	--contrast-700: #a9a9a9;
	--contrast-600: #d0d0d0;
	--contrast-500: #f8f8f8;
	--contrast-400: #f9f9f9;
	--contrast-300: #fafafa;
	--contrast-200: #fbfbfb;
	--contrast-100: #fdfdfd;
	--contrast2-1000: #323232;
	--contrast2-900: #595959;
	--contrast2-800: #818181;
	--contrast2-700: #a9a9a9;
	--contrast2-600: #d0d0d0;
	--contrast2-500: #f8f8f8;
	--contrast2-400: #f9f9f9;
	--contrast2-300: #fafafa;
	--contrast2-200: #fbfbfb;
	--contrast2-100: #fdfdfd;
	--brand-1000: #02030b;
	--brand-900: #030613;
	--brand-800: #04091c;
	--brand-700: #050c25;
	--brand-600: #070e2d;
	--brand-500: #081136;
	--brand-500_rgb: 8, 17, 54;
	--brand-400: #303756;
	--brand-300: #081136;
	--brand-200: #7f8397;
	--brand-100: #a6a9b7;
	--prize-1000: #0f2b14;
	--prize-900: #1b4e24;
	--prize-800: #287134;
	--prize-700: #349444;
	--prize-600: #40b654;
	--prize-500: #4cd964;
	--prize-400: #69df7d;
	--prize-300: #85e596;
	--prize-200: #a2ebae;
	--prize-100: #bff1c7;
	--success-1000: #0f2b14;
	--success-900: #1b4e24;
	--success-800: #287134;
	--success-700: #349444;
	--success-600: #40b654;
	--success-500: #4cd964;
	--success-400: #69df7d;
	--success-300: #85e596;
	--success-200: #a2ebae;
	--success-100: #bff1c7;
	--warning-1000: #301208;
	--warning-900: #56200f;
	--warning-800: #7d2e15;
	--warning-700: #a33d1c;
	--warning-600: #ca4b22;
	--warning-500: #f05929;
	--warning-400: #f2744b;
	--warning-300: #f58e6e;
	--warning-200: #f7a990;
	--warning-100: #fac3b2;
	--background-1000: #2f3031;
	--background-900: #545659;
	--background-800: #7a7d80;
	--background-700: #9fa3a8;
	--background-600: #c4cacf;
	--background-500: #eaf0f7;
	--background-400: #edf2f8;
	--background-300: #f1f5fa;
	--background-200: #f4f7fb;
	--background-100: #f7fafc;

	/* gradient */
	--gradient-color1: #39415e;
	--gradient-color2: #081136;
	--gradient-color1--jackpot: #d1d1d1;
	--gradient-color2--jackpot: #fff;

	/* overlay */
	--overlay_bg: rgba(0, 0, 0, 0.7);

	/* fonts */
	--font-family--page: 'Roboto', sans-serif;
	--font-family--h1: 'Roboto', sans-serif;
	--font-family--h2: 'Roboto', sans-serif;
	--font-family--h3: 'Roboto', sans-serif;
	--font-family--h4: 'Roboto', sans-serif;
	--font-family--title: 'Roboto', sans-serif;
	--font-family--subtitle: 'Roboto', sans-serif;
	--font-family--body: 'Roboto', sans-serif;
	--font-family--body2: 'Roboto', sans-serif;
	--font-family--small: 'Roboto', sans-serif;
	--font-family--button: 'Roboto', sans-serif;
	--font-family: var(--font-family--body);

	/* font-sizes */
	--font-size--h1: 1.75rem;
	--font-size--h2: 2rem;
	--font-size--h3: 1.75rem;
	--font-size--h4: 1.25rem;
	--font-size--title: 1.125rem;
	--font-size--subtitle: 0.875rem;
	--font-size--body: 1rem;
	--font-size--body2: 0.875rem;
	--font-size--small: 0.75rem;
	--font-size--button: 0.875rem;

	/* font-weight */
	--font-weight--h1: 400;
	--font-weight--h2: 400;
	--font-weight--h3: 700;
	--font-weight--h4: 700;
	--font-weight--title: 700;
	--font-weight--subtitle: 700;
	--font-weight--body: 400;
	--font-weight--body2: 400;
	--font-weight--small: 400;
	--font-weight--button: 700;

	/* spacing */
	--device_gap: 1rem;

	/* radius */
	--border-radius--button: 0.25rem;
	--border-radius--market-button: 0.5rem;

	/* sizes */
	--container-xxs: 360px;
	--container-xs: 576px;
	--container-sm: 768px;
	--container-md: 992px;
	--container-lg: 1200px;
	--container-xl: 1440px;
	--container-live-game: 450px;

	/* constructions */
	--page-header-height: 100px;
	--page-header-height--xs: 50px;
	--page-header-z-index: 100;
	--page-footer-margin-top: auto;
}

@media screen and (max-width: 575px) {
	html {
		font-size: 16px;
	}
}