/* Colours
-------------------------
	Primary: #fed76e
	Primary RGB: 254, 215, 110

	Primary Dark: #d3a53d
	Primary Dark RGB: 211, 165, 61

	Secondary: #adb1a3
	Secondary RGB: 173, 177, 163

	Secondary Dark: #7a7b7a
	Secondary Dark RGB: 122, 123, 122

	Color3: #c7d9a7
	Color3 RGB: 199, 217, 167

	Color3 Dark: #8f9d6a
	Color3 Dark RGB: 143, 157, 106

	Color4: #e88a7a
	Color4 RGB: 232, 138, 122

	Color4 Dark: #bc6b5e
	Color4 Dark RGB: 188, 107, 94

	Color5: #db8f58
	Color5 RGB: 219, 143, 88

	Color5 Dark: #af642c
	Color5 Dark RGB: 175, 100, 44

	Color6: #b1e5db
	Color6 RGB: 82, 191, 178

	Color6 Dark: #297a6e
	Color6 Dark RGB: 41, 122, 110

	Light: #fcf4f0
	Light RGB: 252, 244, 240

	Light Dark: #efd9ce
	Light Dark RGB: 239, 217, 206

	Dark: #2a2b2a
	Dark RGB: 42, 43, 42

	Dark Dark: #262826
	Dark Dark RGB: 38, 40, 38
-------------------------
*/
:root {
	color-scheme: light dark;

	--color-primary: #fed76e;
	--color-primary-rgb: 254, 215, 110;
	--color-primary-dark: #d3a53d;
	--color-primary-dark-rgb: 211, 165, 61;

	--color-secondary: #adb1a3;
	--color-secondary-rgb: 173, 177, 163;
	--color-secondary-dark: #7a7b7a;
	--color-secondary-dark-rgb: 122, 123, 122;

	--color-color3: #c7d9a7;
	--color-color3-rgb: 199, 217, 167;
	--color-color3-dark: #8f9d6a;
	--color-color3-dark-rgb: 143, 157, 106;

	--color-color4: #e88a7a;
	--color-color4-rgb: 232, 138, 122;
	--color-color4-dark: #bc6b5e;
	--color-color4-dark-rgb: 188, 107, 94;

	--color-color5: #db8f58;
	--color-color5-rgb: 219, 143, 88;
	--color-color5-dark: #af642c;
	--color-color5-dark-rgb: 175, 100, 44;

	--color-color6: #b1e5db;
	--color-color6-rgb: 177, 229, 219;
	--color-color6-dark: #90c4ba;
	--color-color6-dark-rgb: 144, 196, 186;

	--color-light: #fff8e9;
	--color-light-rgb: 255, 248, 233;
	--color-light-dark: #edd59f;
	--color-light-dark-rgb: 237, 213, 159;

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

	--color-dark: #302c23;
	--color-dark-rgb: 48, 44, 35;
	--color-dark-dark: #1d1b16;
	--color-dark-dark-rgb: 29, 27, 22;

	--font-heading: 'Bricolage Grotesque', sans-serif;
	--font-body: 'Bricolage Grotesque', sans-serif;

	--radius-tiny: 4px 4px 4px 4px;
	--radius-small: 8px 8px 8px 8px;
	--radius-medium: 16px 16px 16px 16px;
	--radius-large: 32px 32px 32px 32px;
	--radius-xlarge: 64px 64px 64px 64px;
	--radius-huge: 96px 96px 96px 96px;
	--radius-full: 100%;

	--radius-top-tiny: 4px 4px 0 0;
	--radius-top-small: 8px 8px 0 0;
	--radius-top-medium: 16px 16px 0 0;
	--radius-top-large: 32px 32px 0 0;
	--radius-top-xlarge: 64px 64px 0 0;
	--radius-top-huge: 96px 96px 0 0;

	--radius-left-tiny: 4px 0 0 4px ;
	--radius-left-small: 8px 0 0 8px ;
	--radius-left-medium: 16px 0 0 16px ;
	--radius-left-large: 32px 0 0 32px ;
	--radius-left-xlarge: 64px 0 0  64px;
	--radius-left-huge: 96px 0 0  96px;

	--radius-right-tiny: 0 4px 4px 0 ;
	--radius-right-small: 0 8px 8px 0;
	--radius-right-medium: 0 16px 16px 0;
	--radius-right-large: 0 32px 32px 0;
	--radius-right-xlarge: 0 64px 64px 0;
	--radius-right-huge: 0 96px 96px 0;

	--radius-bottom-tiny: 0 0 4px 4px;
	--radius-bottom-small: 0 0 8px 8px;
	--radius-bottom-medium: 0 0 16px 16px;
	--radius-bottom-large: 0 0 32px 32px;
	--radius-bottom-xlarge: 0 0 64px 64px;
	--radius-bottom-huge: 0 0 96px 96px;
}

html[data-theme="dark"] {
	color-scheme: dark;

	/* Basis */
	--color-light: #2f2b26;
	--color-light-rgb: 47, 43, 38;

	--color-white: #262826;
	--color-white-rgb: 38, 40, 38;

	--color-dark: #f5f1eb;
	--color-dark-rgb: 245, 241, 235;

	--color-dark-dark: #ffffff;
	--color-dark-dark-rgb: 255, 255, 255;

	/* Primary */
	--color-primary: #ffe08b;
	--color-primary-rgb: 255, 224, 139;

	--color-primary-dark: #65562f;
	--color-primary-dark-rgb: 254, 215, 110;

	/* Secondary */
	--color-secondary: #c6cbbd;
	--color-secondary-rgb: 198, 203, 189;

	--color-secondary-dark: #adb1a3;
	--color-secondary-dark-rgb: 173, 177, 163;

	/* Color 3 */
	--color-color3: #d8e6bc;
	--color-color3-rgb: 216, 230, 188;

	--color-color3-dark: #c7d9a7;
	--color-color3-dark-rgb: 199, 217, 167;

	/* Color 4 */
	--color-color4: #f2a192;
	--color-color4-rgb: 242, 161, 146;

	--color-color4-dark: #e88a7a;
	--color-color4-dark-rgb: 232, 138, 122;

	/* Color 5 */
	--color-color5: #e8a777;
	--color-color5-rgb: 232, 167, 119;

	--color-color5-dark: #db8f58;
	--color-color5-dark-rgb: 219, 143, 88;

	/* Color 6 */
	--color-color6: #72d1c5;
	--color-color6-rgb: 114, 209, 197;

	--color-color6-dark: #52bfb2;
	--color-color6-dark-rgb: 82, 191, 178;
}

/* Mobile */
@media (max-width: 767px) {
	:root {
		--radius-tiny: 4px 4px 4px 4px;
		--radius-small: 6px 6px 6px 6px;
		--radius-medium: 12px 12px 12px 12px;
		--radius-large: 20px 20px 20px 20px;
		--radius-xlarge: 32px 32px 32px 32px;
		--radius-huge: 48px 48px 48px 48px;

		--radius-top-tiny: 4px 4px 0 0;
		--radius-top-small: 6px 6px 0 0;
		--radius-top-medium: 12px 12px 0 0;
		--radius-top-large: 20px 20px 0 0;
		--radius-top-xlarge: 32px 32px 0 0;
		--radius-top-huge: 48px 48px 0 0;

		--radius-left-tiny: 4px 0 0 4px;
		--radius-left-small: 6px 0 0 6px;
		--radius-left-medium: 12px 0 0 12px;
		--radius-left-large: 20px 0 0 20px;
		--radius-left-xlarge: 32px 0 0 32px;
		--radius-left-huge: 48px 0 0 48px;

		--radius-right-tiny: 0 4px 4px 0;
		--radius-right-small: 0 6px 6px 0;
		--radius-right-medium: 0 12px 12px 0;
		--radius-right-large: 0 20px 20px 0;
		--radius-right-xlarge: 0 32px 32px 0;
		--radius-right-huge: 0 48px 48px 0;

		--radius-bottom-tiny: 0 0 4px 4px;
		--radius-bottom-small: 0 0 6px 6px;
		--radius-bottom-medium: 0 0 12px 12px;
		--radius-bottom-large: 0 0 20px 20px;
		--radius-bottom-xlarge: 0 0 32px 32px;
		--radius-bottom-huge: 0 0 48px 48px;
	}
}