/* Colours
-------------------------
	Primary: #e94571
	Primary RGB: 233, 69, 113

	Primary Dark: #aa1744
	Primary Dark RGB: 170, 23, 68

	Secondary: #9090dd
	Secondary RGB: 144, 144, 221

	Secondary Dark: #4a4aa0
	Secondary Dark RGB: 74, 74, 160

	Color3: #b30570
	Color3 RGB: 179, 5, 112

	Color3 Dark: #7a0659
	Color3 Dark RGB: 122, 6, 89

	Color4: #ff8c71
	Color4 RGB: 255, 140, 113

	Color4 Dark: #af4b37
	Color4 Dark RGB: 175, 75, 55

	Color5: #f87471
	Color5 RGB: 248, 116, 113

	Color5 Dark: #d85c5a
	Color5 Dark RGB: 216, 92, 90

	Color6: #52bfb2
	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: #341135
	Dark RGB: 52, 17, 53

	Dark Dark: #1d081e
	Dark Dark RGB: 29, 8, 30
-------------------------
*/

:root {
	color-scheme: light dark;

	--color-primary: #e94571;
	--color-primary-rgb: 233, 69, 113;
	--color-primary-dark: #aa1744;
	--color-primary-dark-rgb: 170, 23, 68;

	--color-secondary: #9090dd;
	--color-secondary-rgb: 144, 144, 221;
	--color-secondary-dark: #4a4aa0;
	--color-secondary-dark-rgb: 74, 74, 160;

	--color-color3: #b30570;
	--color-color3-rgb: 179, 5, 112;
	--color-color3-dark: #7a0659;
	--color-color3-dark-rgb: 122, 6, 89;

	--color-color4: #ff8c71;
	--color-color4-rgb: 243, 170, 90;
	--color-color4-dark: #af4b37;
	--color-color4-dark-rgb: 175, 75, 55;

	--color-color5: #f87471;
	--color-color5-rgb: 248, 116, 113;
	--color-color5-dark: #d85c5a;
	--color-color5-dark-rgb: 216, 92, 90;

	--color-color6: #52bfb2;
	--color-color6-rgb: 82, 191, 178;
	--color-color6-dark: #297a6e;
	--color-color6-dark-rgb: 41, 122, 110;

	--color-light: #fcf4f0;
	--color-light-rgb: 252, 244, 240;
	--color-light-dark: #efd9ce;
	--color-light-dark-rgb: 239, 217, 206;

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

	--color-dark: #341135;
	--color-dark-rgb: 52, 17, 53;
	--color-dark-dark: #1d081e;
	--color-dark-dark-rgb: 29, 8, 30;

	--font-heading: 'Parkinsans', sans-serif;
	--font-body:  'Parkinsans', 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-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-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: #270c29;
	--color-light-rgb: 39, 12, 41;

  --color-white: #1d081e;
	--color-white-rgb: 29, 8, 30;

  --color-dark: #f4f4f6;
  --color-dark-rgb: 244, 244, 246;

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

  /* Primary iets lichter voor contrast */
  --color-primary: #ff5f8a;
  --color-primary-rgb: 255, 95, 138;

  --color-primary-dark: #e94571;
  --color-primary-dark-rgb: 233, 69, 113;

  /* Secondary iets feller */
  --color-secondary: #a8a8ff;
  --color-secondary-rgb: 168, 168, 255;

  --color-secondary-dark: #6f6fdd;
  --color-secondary-dark-rgb: 111, 111, 221;

	/* Color 3 */
  --color-color3: #d6339a;
	--color-color3-rgb: 214, 51, 154;

	--color-color3-dark: #a61e75;
	--color-color3-dark-rgb: 166, 30, 117;

	/* Color 4 */
	--color-color4: #ff9f85;
	--color-color4-rgb: 255, 159, 133;

	--color-color4-dark: #d66a53;
	--color-color4-dark-rgb: 214, 106, 83;

	/* Color 5 */
	--color-color5: #ff8e8b;
	--color-color5-rgb: 255, 142, 139;

	--color-color5-dark: #d96461;
	--color-color5-dark-rgb: 217, 100, 97;

	/* Color 6 */
	--color-color6: #67d4c6;
	--color-color6-rgb: 103, 212, 198;

	--color-color6-dark: #3aa092;
	--color-color6-dark-rgb: 58, 160, 146;
}