/* ---------- Import fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;700&display=swap');

/* ---------- Root Variables ---------- */
:root {
  --shadow-base: 0 0 1px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
  --color-surface-pagination: #CCC;
  --color-surface-taskbar: #3568B3;
	
	
	
	

--color-surface-taskbar: #3568B3;

--color-surface-sidebar: #AEC1DB;
--color-surface-footer: #F19620;
--color-surface-pagination: #CCC;
--color-surface-menu: #CCCCCC;
--image-header: url('https://www.snoeten.nl/cdn/assets/css/layout/container/img/surfaceHeader.4.png') bottom;
--image-cover: url('https://www.snoeten.nl/cdn/assets/css/layout/profile/img/imageCover.png');
--image-shortcuts: url('https://www.snoeten.nl/cdn/assets/css/layout/profile/img/imageShortcuts.png');
--shadow-header: rgba(50, 50, 93, 0.25) 0px 10px 27px -5px, rgba(0, 0, 0, 0.3) 0px 5px 16px -8px;
--shadow-footer: 0 0 1px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.12);
				 
				 
						 
--shadow-taskbar: inset 0 1px rgba(255,255,255,.9), 0 1px 2px rgba(0,0,0,.07);
--shadow-sidebar: inset 0 1px rgb(from var(--color-surface-sidebar) r g b / 0.95), var(--base-shadow);
--shadow-main: inset 0 1px rgb(from var(--color-surface-main) r g b / 0.95), var(--base-shadow);


--text-color: #555;



--base-font: 'Comfortaa', sans-serif;
--base-font-size: 16px;
--base-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);

--color-text-tabspage: #2F3440;
--color-border: #E3E5E8;



--color-surface-header: linear-gradient(180deg, #F9A62B 0%, #F79A16 55%, #ED9010 100%);
--color-surface-taskbar: linear-gradient(180deg, #2F68CC 0%, #285EBC 45%, #1F4FAE 100%);

--color-surface-tabspage: #F2F3F5;
--color-surface-footer: linear-gradient(180deg, #F9A62B 0%, #F79A16 55%, #ED9010 100%);



--color-button-active: #FFF;
--color-button-inactive: #757B84;
--color-surface-button-active: linear-gradient(180deg, #2F68CC 0%, #285EBC 45%, #1F4FAE 100%);
--color-surface-button-inactive: transparent;




--shadow-avatar: 0 1px 2px rgba(0,0,0,.15);
--shadow-tabspage: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;





/* highlight */
--color-highlight: #EFF6FE;

/* button */
--color-button: #404040;
--color-surface-button: linear-gradient(to bottom, #ffffff 0%, #f7f7f7 48%, #ececec 49%, #e3e3e3 100%);
--color-border-button: #B5BAC4;
--color-shadow-button: inset 0 1px rgba(255,255,255,.95), 0 1px 2px rgba(0,0,0,.08);
	/* active */
	--color-buttonActive-text: #FFF;
	--color-buttonActive-subtext: #1F4FAE;
	--color-buttonActive-surface: linear-gradient(180deg, #2F68CC 0%, #285EBC 45%, #1F4FAE 100%);
	/* inactive */
	--color-buttonInactive: #757B84;
	--color-buttonInactive-surface: transparent;

/* main */
--color-surface-main: #FFF;
--color-border-main: rgba(0, 0, 0, 0.12);
}
 
/* Desktop */
@media (min-width: 1025px) {
.no-css {
--profile-taskbar: transparent;
--profile-header: transparent;
--profile-header-shadow: transparent;
--profile-cover: transparent;
--profile-cover-shadow: transparent;
--profile-cover-radius: 10px;
--profile-article: transparent;
--profile-article-shadow: transparent;
--profile-pagination: transparent;
--profile-pagination-padding: 0px;
--profile-pagination-shadow: transparent;
--profile-footer: transparent;
--profile-footer-shadow: transparent;

--base-shadow: none;
--color-surface-taskbar: transparent;
--color-surface-header: transparent;
--color-surface-main: transparent;
--color-surface-sidebar: transparent;
--color-surface-footer: transparent;
--color-surface-pagination: transparent;
--image-cover: transparent;
--image-shortcuts: transparent;
--shadow-header: none;
--shadow-taskbar: none;
--shadow-sidebar: none;
--shadow-main: none;
}
}

/* Mobiel */
@media (max-width: 768px) {
.no-css {
--profile-taskbar: transparent;
--profile-header: transparent;
--profile-header-shadow: transparent;
--profile-cover: transparent;
--profile-cover-shadow: transparent;
--profile-cover-radius: 10px;
--profile-article: transparent;
--profile-article-shadow: transparent;
--profile-pagination: transparent;
--profile-pagination-padding: 0px;
--profile-pagination-shadow: transparent;
--profile-footer: transparent;
--profile-footer-shadow: transparent;

--base-shadow: none;
--color-surface-main: transparent;
--color-surface-footer: transparent;
--color-surface-pagination: transparent;
--image-cover: transparent;
--image-shortcuts: transparent;
}
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
.no-css {
--profile-taskbar: transparent;
--profile-header: transparent;
--profile-header-shadow: transparent;
--profile-cover: transparent;
--profile-cover-shadow: transparent;
--profile-cover-radius: 10px;
--profile-article: transparent;
--profile-article-shadow: transparent;
--profile-pagination: transparent;
--profile-pagination-padding: 0px;
--profile-pagination-shadow: transparent;
--profile-footer: transparent;
--profile-footer-shadow: transparent;

--base-shadow: none;
--color-surface-main: transparent;
--color-surface-footer: transparent;
--color-surface-pagination: transparent;
--image-cover: transparent;
--image-shortcuts: transparent;
}
}