/* added root vars for colors etc. */
:root {
    /* calculation max width, no need to use media queries
     it also takes padding into account, no need to specify padding
     when container width is less than max, margin left/right will be equal to --base-padding
    */
    --max-width: calc(100% - (2 * max(calc((100% - (var(--max-container-width))) / 2), var(--base-padding))));
  
    --padding-container-sides: 16px;
    
    /*--primary-color: #00a2eb;*/
    --primary-color: hsl(227, 94%, 87%);
    --primary-color-400: hsl(227, 94%, 60%);
    --primary-color-200: hsl(227, 94%, 80%);
    --primary-color-100: hsl(227, 94%, 90%);
    --primary-color-50: hsl(227, 94%, 95%);
    
    --primary-alt-color: #C0D6CB;
    --secondary-color: #fde571;
    --tertiary-color: #76ccbc;
  
    --dark-bg-color: #002412;
    
    --primary-txt-color: hsl(227, 95%, 56%);
    --secondary-txt-color: var(--dark-bg-color);
  
    --secondary-border-color: var(--dark-bg-color);
  
    --ok-bg-color: #eeffe2;
    --ok-txt-color: #358000;
    --ok-border-color: var(--ok-txt-color);
  
    --error-bg-color: #ffe0e0;
    --error-txt-color: #b63433;
    --error-border-color: var(--error-txt-color);
  
    /* grays */
    --gray-color-900: hsl(0, 0%, 0%);
    --gray-color-800: hsl(0, 0%, 7.5%);
    --gray-color-600: hsl(0, 0%, 15%);
    --gray-color-500: hsl(0, 0%, 32.5%);
    --gray-color-300: hsl(0, 0%, 50%);
    --gray-color-200: hsl(0, 0%, 67.5%);
    --gray-color-100: hsl(0, 0%, 85%);
    --gray-color-000: hsl(0, 0%, 100%);
  
    --border-color: var(--gray-color-300);
    --border-color-form-input: var(--border-color);

    --outline-color: var(--border-color);
    --outline-color-alt: var(--primary-txt-color);
    --link-color: var(--primary-txt-color);
    --link-focus-color: var(--primary-txt-color);
    --link-visited-color: var(--primary-txt-color);
    --link-disabled-color: var(--gray-color-500);
    --darkbg-link-color: var(--gray-color-000);
    --darkbg-link-disabled-color: var(--gray-color-300);
    
    --body-txt-color: var(--primary-txt-color);;
    --font-lead-txt-color: var(--primary-txt-color);;
    --function-link-txt-color: var(--primary-txt-color);;
    --function-link-hover-txt-color: var(--primary-txt-color);;
    
    --h1-txt-color: var(--secondary-txt-color);
    --h2-txt-color: var(--secondary-txt-color);
    --h3-txt-color: var(--secondary-txt-color);
    --h4-txt-color: var(--secondary-txt-color);
    --h5-txt-color: var(--secondary-txt-color);
    --h6-txt-color: var(--secondary-txt-color);
    --form-label-txt-color: var(--secondary-txt-color);
    --back-link-txt-color: var(--secondary-txt-color);
    --back-link-hover-txt-color: var(--secondary-txt-color);
  
    --body-bg-color: var(--gray-color-000);
    --body-txt-color: var(--secondary-txt-color);
  
    --base-padding: 1.5rem;
    --base-padding: 2rem;
    --base-padding-half: calc(var(--base-padding) / 2);
    
    --max-container-width: 1170px;
  
    --spotbox-icon-size: 8rem;
    --spotbox-padding: var(--base-padding);
  
    /* box shadows */
    --box-shadow-style-01: 0 0 5px #00000029;
  
    /* bade color vars */
    --badge-txt-color: var(--gray-color-000);
    --badge-bg-color: var(--secondary-txt-color);
  
    --badge-large-txt-color: var(--badge-txt-color);
    --badge-large-bg-color: var(--badge-bg-color);
  
    --badge-small-txt-color: var(--badge-txt-color);
    --badge-small-bg-color: var(--badge-bg-color);
  
    --badge-info-txt-color: var(--badge-bg-color);
    --badge-info-bg-color: var(--primary-color-50);
    
    --badge-success-txt-color: var(--badge-bg-color);
    --badge-success-bg-color: var(--ok-bg-color);
    
    --badge-warning-txt-color: var(--badge-bg-color);
    --badge-warning-bg-color: var(--secondary-color);
    
    --badge-error-txt-color: var(--badge-bg-color);
    --badge-error-bg-color: var(--error-bg-color);

    /* fluid font sizes:
    fluid type, not perfect as of now
    see: https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/
    */
    --fluid-font-size-medium: clamp(1rem, 5vw, 3rem);
    --fluid-font-size-large: clamp(2.4rem, -0.7rem + 6.666vw, 8rem);
    
  
    /* SVGs: not used at the moment ..... */
    --icon-add: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/add.svg");
    --icon-alert-outline: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/alert-outline.svg");
    --icon-angle-arrow-down: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/angle-arrow-down.svg");
    --icon-angle-arrow-up: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/angle-arrow-up.svg");
    --icon-arrow-left: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/arrow-left.svg");
    --icon-arrow-right: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/arrow-right.svg");
    --icon-book-open: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/book-open.svg");
    --icon-calendar: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/calendar.svg");
    --icon-cash-multiple: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/cash-multiple.svg");
    --icon-check: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/check.svg");
    --icon-check-circle-outline: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/check-circle-outline.svg");
    --icon-chevron-left: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/chevron-left.svg");
    --icon-chevron-right: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/chevron-right.svg");
    --icon-close: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/close.svg");
    --icon-close-circle: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/close-circle.svg");
    --icon-close-circle-outline: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/close-circle-outline.svg");
    --icon-content-save: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/content-save.svg");
    --icon-delete: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/delete.svg");
    --icon-delete-outline: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/delete-outline.svg");
    --icon-dots-vertical: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/dots-vertical.svg");
    --icon-download: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/download.svg");
    --icon-error: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/error.svg");
    --icon-file: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/file.svg");
    --icon-file-document-box: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/file-document-box.svg");
    --icon-folder-multiple: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/folder-multiple.svg");
    --icon-help: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/help.svg");
    --icon-help-circle-outline: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/help-circle-outline.svg");
    --icon-info: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/info.svg");
    --icon-language: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/language.svg");
    --icon-magnify: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/magnify.svg");
    --icon-menu-down: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/menu-down.svg");
    --icon-menu-left: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/menu-left.svg");
    --icon-menu-right: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/menu-right.svg");
    --icon-menu-up: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/menu-up.svg");
    --icon-message: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/message.svg");
    --icon-minus: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/minus.svg");
    --icon-open-in-new: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/open-in-new.svg");
    --icon-pencil: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/pencil.svg");
    --icon-plus: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/plus.svg");
    --icon-printer: url(/themes/custom/fds_sof_theme/imgs/print-article.png);
    --icon-refresh: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/refresh.svg");
    --icon-save: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/save.svg");
    --icon-settings: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/settings.svg");
    --icon-sort-acending: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/sort-acending.svg");
    --icon-sort-descending: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/sort-descending.svg");
    --icon-sort-none: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/sort-none.svg");
    --icon-success: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/success.svg");
    --icon-warning: url("/themes/custom/fds_sof_theme/vendors/dkfds-components-7.5.0/img/svg-icons/warning.svg");
}