@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root {
	--mark-dark: #101820;   /* bardzo ciemny granat, jak w logo */
	--mark: #325D80;        /* wyraźny chłodny niebieski, dobrze kontrastuje z czernią */
	--mark-light: #A5C4D9;  /* jasny, lekki niebieski, dobry na tła, przyciski, hovery */
	--mark2:var(--mark);
	--mark2-light:var(--mark-light);
	--mark2-dark:var(--mark-dark);
	--grey-dark:#424242;
	--grey-darker:#272727;
	--grey:#888888;
	--grey-light:#ccc;
	--grey-lighter:#f1f2f6;
	--black:#000;
	--white:#fff;
	--red:#D63024;
	--red-light:#FF5F5D;
	--red-dark:#AE170C;
	--green:#AED581;
	--green-light:#C5E1A5;
	--green-dark:#116201;
	--yellow:#ff0;
	--font-family-header: 'Quicksand', sans-serif;
	--font-family-header-light: 400;
	--font-family-header-regular: 500;
	--font-family-header-medium: 600;
	--font-family-header-bold: 700;
	--font-family-header-extra-bold: 800;

	--font-family-text: 'Source Sans 3', sans-serif;
	--font-family-text-light: 400;
	--font-family-text-regular: 500;
	--font-family-text-medium: 600;
	--font-family-text-bold: 700;
	--font-family-icon-google: 'Material Symbols Outlined';
	scroll-behavior: smooth;
}
body.dark_mode {
	--mark:#EF5350;
	--mark-light:#E57373;
	--mark-dark:#F44336;
	--mark2:var(--mark);
	--mark2-light:var(--mark-light);
	--mark2-dark:var(--mark-dark);
	--grey-dark:#f1f2f6;
	--grey-darker:#ccc;
	--grey:#888888;
	--grey-light:#424242;
	--grey-lighter:#272727;
	--black:#dedede;
	--white:#141414;
	--red:#f00;
	--yellow:#ff0;
}