/*
  stores all configurable variables used for styling


  colors
    light mode
    dark mode
    colors based on the choosen theme
    colors based on the system preference
  fonts
  typography
    default
    large screens
    medium screens
    small screens
  spacing
    default
    large screens
    medium screens
    small screens
  corners
  buttons and inputs shape
*/



/* colors
============================================================================ */

/* colors: light mode
------------------------------ */
:root {
  /* general elements */
  --pos-color-light-prominent: #141414;
  /* Highlighted, prominent texts, e.g. prices */
  --pos-color-light-normal: #374151;
  /* Normal content text */
  --pos-color-light-supplementary: #6b7280;
  /* Secodary texts, e.g.: table column titles, notes, metadata */
  --pos-color-light-graphic: #405568;
  /* Icons without functionality */
  --pos-color-light-inverted: #fff;
  /* Used for texts and icons that won't be visible over given backgrounds, or when the text color would be the same as the bg */
  --pos-color-light-interactive: #2173c4;
  /* Clickable graphical elements, interactive icons, focus glow */
  --pos-color-light-interactive: #2173c4;
  /* Clickable text elements */
  --pos-color-light-interactive-hover: #194f90;
  /* Hover state for interactive elements */
  --pos-color-light-interactive-disabled: #d9ebfc;
  /* Disabled interactive elements */

  /* prominent elements */
  --pos-color-light-colorful-background: #fff;
  /* For very prominent elements and sections. e.g. CTA bg, category bar bg, overlays, banners */
  --pos-color-light-colorful-background-hover: #f7f8fa;
  /* For very prominent elements or as a hover state / highlight over the Colorful Bg 1. */
  --pos-color-light-colorful-background-normal: #374151;
  /* Normal color of content (icons, text) that appear over the Colorful Bg. */
  --pos-color-light-colorful-background-supplementary: #6b7280;
  /* A less emphasized color for content that appear over the Colorful Bg (e.g. label, metadata, sidenote). */
  --pos-color-light-ribbon-color: #2173c4;
  /* For prominent ribbons on cards */
  --pos-color-light-ribbon-text: #fff;
  /* For ribbon text on cards */

  /* buttons */
  --pos-color-light-button-primary-fill-normal: #141414;
  /* background of Primary buttons */
  --pos-color-light-button-primary-fill-hover: #374151;
  /* background of Primary buttons on hover */
  --pos-color-light-button-primary-stroke-normal: #141414;
  /* border of Primary buttons */
  --pos-color-light-button-primary-stroke-hover: #374151;
  /* border of Primary buttons on hover */
  --pos-color-light-button-primary-text-normal: #fff;
  /* Text color of Primary buttons */
  --pos-color-light-button-primary-text-hover: #fff;
  /* Text color of Primary buttons on hover */

  --pos-color-light-button-secondary-fill-normal-transparent: #fff0;
  /* background of Secondary buttons */
  --pos-color-light-button-secondary-fill-normal: #f7f8fa;
  /* background of Secondary buttons */
  --pos-color-light-button-secondary-fill-hover-transparent: #fff0;
  /* background of Secondary buttons on hover */
  --pos-color-light-button-secondary-fill-hover: #fff;
  /* background of Secondary buttons on hover */
  --pos-color-light-button-secondary-stroke-normal: #b6bdca;
  /* Border of Secondary buttons */
  --pos-color-light-button-secondary-stroke-hover: #808691;
  /* Border of Secondary buttons on hover */
  --pos-color-light-button-secondary-text-normal: #2173c4;
  /* Text color of Secondary buttons */
  --pos-color-light-button-secondary-text-hover: #194f90;
  /* Text color of Secondary buttons on hover */

  /* backgrounds */
  --pos-color-light-page-background: #f7f8fa;
  /* Background of the whole page */
  --pos-color-light-page-background-transparent: #f7f8fa00;
  /* Background of the whole page with transparency */
  --pos-color-light-panel-background: #fff;
  /* Background of elements like: cards, sections, panels, popups, bars etc. */
  --pos-color-light-highlighted-background: #eff2f6;
  /* Background of elements that needs to be stand out form the page or panel bg. E.g. highlighted sections, page title bar, filter bar etc */
  --pos-color-light-divider-lines: #e2e8f0;
  /* Lines that visually separate sections, e.g.: table rows, content. */
  --pos-color-light-shadow: #141414;
  /* Shadow of elements */

  /* input fields */
  --pos-color-light-input-field-background: #fff;
  /* Background of form elements (textarea, input, checkbox etc.) */
  --pos-color-light-input-field-border: #6b7280;
  /* Border of form elements (textarea, input, checkbox etc.) */
  --pos-color-light-input-field-text: #374151;
  /* Text color of form elements (textarea, input, checkbox etc.) */

  /* utility */
  --pos-color-light-important-normal: #b91c1c;
  /* Warnings, important notes, errors, negative feedback */
  --pos-color-light-important-hover: #ca3a31;
  /* Hover state of important elements */
  --pos-color-light-important-disabled: #fecaca;
  /* Disabled state of important elements */

  --pos-color-light-confirmation-normal: #0f7b0a;
  /* Acceptance, confirmation, positive  feedback */
  --pos-color-light-confirmation-hover: #098f69;
  /* Hover state of confirmation elements */
  --pos-color-light-confirmation-disabled: #bbddd3;
  /* Disabled state of confirmation elements */

  --pos-color-light-warning-normal: #f3b14e;
  /* Warnings, possible negative outcome, notifications */
  --pos-color-light-warning-hover: #ffbe5b;
  /* Hover state of warning elements */
  --pos-color-light-warning-disabled: #ffe9c8;
  /* Disabled state of warning elements */
  --card-bg-color-light-from: #FFFFFF;
  ;
  /* card bacground gradient from  */
  --card-bg-color-light-to: #f7f8fa;
  /* card bacground gradient from  */
  --subtitle-gradient-light-from: #2173c4;
  /*subtitle gradient light from*/
  --subtitle-gradient-light-to: #0f7b0a;
  /*subtitle gradient light to*/

  /*For icon path stroke*/
  --stroke-light: #405568;

  /*For complex box gradients*/
  --pos-color-light-complex-box-gradient: linear-gradient(200deg, rgba(255, 255, 255, 0.8) 31.83%, rgba(247, 248, 250, 0) 74.89%);

  /*Complex box top box border*/
  --pos-color-light-complex-box-top-border: linear-gradient(150.59deg, #E2E8F0 0.83%, rgba(255, 255, 255, 0) 99.3%);

}


/* colors: dark mode
------------------------------ */
:root {
  /* general elements */
  --pos-color-dark-prominent: #fff;
  /* Highlighted, prominent texts, e.g. prices */
  --pos-color-dark-normal: #b6bdca;
  /* Normal content text */
  --pos-color-dark-supplementary: #808691;
  /* Secodary texts, e.g.: table column titles, notes, metadata */
  --pos-color-dark-graphic: #808691;
  /* Icons without functionality */
  --pos-color-dark-inverted: #000;
  /* Used for texts and icons that won't be visible over given backgrounds, or when the text color would be the same as the bg */
  --pos-color-dark-interactive: #fff;
  /* Clickable graphical elements, interactive icons, focus glow */
  --pos-color-dark-interactive: #fff;
  /* Clickable text elements */
  --pos-color-dark-interactive-hover: #38d430;
  /* Hover state for interactive elements */
  --pos-color-dark-interactive-disabled: #6b7280;
  /* Disabled interactive elements */

  /* prominent elements */
  --pos-color-dark-colorful-background: #2173c4;
  /* For very prominent elements and sections. e.g. CTA bg, category bar bg, overlays, banners */
  --pos-color-dark-colorful-background-hover: #194f90;
  /* For very prominent elements or as a hover state / highlight over the Colorful Bg 1. */
  --pos-color-dark-colorful-background-normal: #fff;
  /* Normal color of content (icons, text) that appear over the Colorful Bg. */
  --pos-color-dark-colorful-background-supplementary: #9da3ad;
  /* A less emphasized color for content that appear over the Colorful Bg (e.g. label, metadata, sidenote). */
  --pos-color-dark-ribbon-color: #2173c4;
  /* For prominent ribbons on cards */
  --pos-color-dark-ribbon-text: #fff;
  /* For ribbon text on cards */

  /* buttons */
  --pos-color-dark-button-primary-fill-normal: #fff;
  /* background of Primary buttons */
  --pos-color-dark-button-primary-fill-hover: #b6bdca;
  /* background of Primary buttons on hover */
  --pos-color-dark-button-primary-stroke-normal: #fff;
  /* border of Primary buttons */
  --pos-color-dark-button-primary-stroke-hover: #b6bdca;
  /* border of Primary buttons on hover */
  --pos-color-dark-button-primary-text-normal: #141414;
  /* Text color of Primary buttons */
  --pos-color-dark-button-primary-text-hover: #000;
  /* Text color of Primary buttons on hover */

  --pos-color-dark-button-secondary-fill-normal-transparent: #fff0;
  /* background of Secondary buttons */
  --pos-color-dark-button-secondary-fill-normal: #000;
  /* background of Secondary buttons */
  --pos-color-dark-button-secondary-fill-hover-transparent: #fff0;
  /* background of Secondary buttons on hover */
  --pos-color-dark-button-secondary-fill-hover: #000;
  /* background of Secondary buttons on hover */
  --pos-color-dark-button-secondary-stroke-normal: #374151;
  /* Border of Secondary buttons */
  --pos-color-dark-button-secondary-stroke-hover: #ffffff80;
  /* Border of Secondary buttons on hover */
  --pos-color-dark-button-secondary-text-normal: #fff;
  /* Text color of Secondary buttons */
  --pos-color-dark-button-secondary-text-hover: #fff;
  /* Text color of Secondary buttons on hover */

  /* backgrounds */
  --pos-color-dark-page-background: #000;
  /* Background of the whole page */
  --pos-color-dark-page-background-transparent: #0000;
  /* Background of the whole page with transparency */
  --pos-color-dark-panel-background: #141414;
  /* Background of elements like: cards, sections, panels, popups, bars etc. */
  --pos-color-dark-highlighted-background: #0c0c0c;
  /* Background of elements that needs to be stand out form the page or panel bg. E.g. highlighted sections, page title bar, filter bar etc */
  --pos-color-dark-divider-lines: #ffffff1a;
  /* Lines that visually separate sections, e.g.: table rows, content. */
  --pos-color-dark-shadow: #141414;
  /* Shadow of elements */

  /* input fields */
  --pos-color-dark-input-field-background: #0c0c0c;
  /* Background of form elements (textarea, input, checkbox etc.) */
  --pos-color-dark-input-field-border: #ffffff1a;
  /* Border of form elements (textarea, input, checkbox etc.) */
  --pos-color-dark-input-field-text: #9da3ad;
  /* Text color of form elements (textarea, input, checkbox etc.) */

  /* utility */
  --pos-color-dark-important-normal: #b91c1c;
  /* Warnings, important notes, errors, negative feedback */
  --pos-color-dark-important-hover: #ca3a31;
  /* Hover state of important elements */
  --pos-color-dark-important-disabled: #fecaca;
  /* Disabled state of important elements */

  --pos-color-dark-confirmation-normal: #0f7b0a;
  /* Acceptance, confirmation, positive  feedback */
  --pos-color-dark-confirmation-hover: #098f69;
  /* Hover state of confirmation elements */
  --pos-color-dark-confirmation-disabled: #bbddd3;
  /* Disabled state of confirmation elements */

  --pos-color-dark-warning-normal: #f3b14e;
  /* Warnings, possible negative outcome, notifications */
  --pos-color-dark-warning-hover: #ffbe5b;
  /* Hover state of warning elements */
  --pos-color-dark-warning-disabled: #ffe9c8;
  /* Disabled state of warning elements */
  --card-bg-color-dark-from: #141414;
  /* card bacground gradient from  */
  --card-bg-color-dark-to: black;
  /*subtitle gradient dark from*/
  --subtitle-gradient-dark-from: #3a8dde;
  /*subtitle gradient dark to*/
  --subtitle-gradient-dark-to: #38d430;

  /*For icon path stroke dark mode*/
  --stroke-dark: #808691;

  /*For complex box gradients*/
  --pos-color-dark-complex-box-gradient: linear-gradient(200deg, rgba(20, 20, 20, 0.8) 21.74%, rgba(0, 0, 0, 0) 74.89%);

  /*Complex box top box border*/
  --pos-color-dark-complex-box-top-border: linear-gradient(150.59deg, rgba(255, 255, 255, 0.1) 0.83%, rgba(255, 255, 255, 0) 99.3%);
}

/* colors based on the theme choosen
------------------------------ */
:root,
:root.pos-theme-light {
  /* general elements */
  --pos-color-prominent: var(--pos-color-light-prominent);
  --pos-color-normal: var(--pos-color-light-normal);
  --pos-color-supplementary: var(--pos-color-light-supplementary);
  --pos-color-graphic: var(--pos-color-light-graphic);
  --pos-color-inverted: var(--pos-color-light-inverted);
  --pos-color-interactive: var(--pos-color-light-interactive);
  --pos-color-interactive: var(--pos-color-light-interactive);
  --pos-color-interactive-hover: var(--pos-color-light-interactive-hover);
  --pos-color-interactive-disabled: var(--pos-color-light-interactive-disabled);

  /* prominent elements */
  --pos-color-colorful-background: var(--pos-color-light-colorful-background);
  --pos-color-colorful-background-hover: var(--pos-color-light-colorful-background-hover);
  --pos-color-colorful-background-normal: var(--pos-color-light-colorful-background-normal);
  --pos-color-colorful-background-supplementary: var(--pos-color-light-colorful-background-supplementary);
  --pos-color-ribbon-color: var(--pos-color-light-ribbon-color);
  --pos-color-ribbon-text: var(--pos-color-light-ribbon-text);

  /* buttons */
  --pos-color-button-primary-fill-normal: var(--pos-color-light-button-primary-fill-normal);
  --pos-color-button-primary-fill-hover: var(--pos-color-light-button-primary-fill-hover);
  --pos-color-button-primary-stroke-normal: var(--pos-color-light-button-primary-stroke-normal);
  --pos-color-button-primary-stroke-hover: var(--pos-color-light-button-primary-stroke-hover);
  --pos-color-button-primary-text-normal: var(--pos-color-light-button-primary-text-normal);
  --pos-color-button-primary-text-hover: var(--pos-color-light-button-primary-text-hover);

  --pos-color-button-secondary-fill-normal-transparent: var(--pos-color-light-button-secondary-fill-normal-transparent);
  --pos-color-button-secondary-fill-normal: var(--pos-color-light-button-secondary-fill-normal);
  --pos-color-button-secondary-fill-hover-transparent: var(--pos-color-light-button-secondary-fill-hover-transparent);
  --pos-color-button-secondary-fill-hover: var(--pos-color-light-button-secondary-fill-hover);
  --pos-color-button-secondary-stroke-normal: var(--pos-color-light-button-secondary-stroke-normal);
  --pos-color-button-secondary-stroke-hover: var(--pos-color-light-button-secondary-stroke-hover);
  --pos-color-button-secondary-text-normal: var(--pos-color-light-button-secondary-text-normal);
  --pos-color-button-secondary-text-hover: var(--pos-color-light-button-secondary-text-hover);

  /* backgrounds */
  --pos-color-page-background: var(--pos-color-light-page-background);
  --pos-color-page-background-transparent: var(--pos-color-light-page-background-transparent);
  --pos-color-panel-background: var(--pos-color-light-panel-background);
  --pos-color-highlighted-background: var(--pos-color-light-highlighted-background);
  --pos-color-divider-lines: var(--pos-color-light-divider-lines);
  --pos-color-shadow: var(--pos-color-light-shadow);

  /* input fields */
  --pos-color-input-field-background: var(--pos-color-light-input-field-background);
  --pos-color-input-field-border: var(--pos-color-light-input-field-border);
  --pos-color-input-field-text: var(--pos-color-light-input-field-text);

  /* utility */
  --pos-color-important-normal: var(--pos-color-light-important-normal);
  --pos-color-important-hover: var(--pos-color-light-important-hover);
  --pos-color-important-disabled: var(--pos-color-light-important-disabled);

  --pos-color-confirmation-normal: var(--pos-color-light-confirmation-normal);
  --pos-color-confirmation-hover: var(--pos-color-light-confirmation-hover);
  --pos-color-confirmation-disabled: var(--pos-color-light-confirmation-disabled);

  --pos-color-warning-normal: var(--pos-color-light-warning-normal);
  --pos-color-warning-hover: var(--pos-color-light-warning-hover);
  --pos-color-warning-disabled: var(--pos-color-light-warning-disabled);
  --card-bg-color-from: var(--card-bg-color-light-from);
  --card-bg-color-to: var(--card-bg-color-light-to);

  --subtitle-gradient-from: var(--subtitle-gradient-light-from);

  --subtitle-gradient-to: var(--subtitle-gradient-light-to);

  --stroke: var(--stroke-light);

  --pos-color-complex-box-gradient: var(--pos-color-light-complex-box-gradient);

  --pos-color-complex-box-top-border: var(--pos-color-light-complex-box-top-border);
}

:root.pos-theme-dark {
  /* general elements */
  --pos-color-prominent: var(--pos-color-dark-prominent);
  --pos-color-normal: var(--pos-color-dark-normal);
  --pos-color-supplementary: var(--pos-color-dark-supplementary);
  --pos-color-graphic: var(--pos-color-dark-graphic);
  --pos-color-inverted: var(--pos-color-dark-inverted);
  --pos-color-interactive: var(--pos-color-dark-interactive);
  --pos-color-interactive: var(--pos-color-dark-interactive);
  --pos-color-interactive-hover: var(--pos-color-dark-interactive-hover);
  --pos-color-interactive-disabled: var(--pos-color-dark-interactive-disabled);

  /* prominent elements */
  --pos-color-colorful-background: var(--pos-color-dark-colorful-background);
  --pos-color-colorful-background-hover: var(--pos-color-dark-colorful-background-hover);
  --pos-color-colorful-background-normal: var(--pos-color-dark-colorful-background-normal);
  --pos-color-colorful-background-supplementary: var(--pos-color-dark-colorful-background-supplementary);
  --pos-color-ribbon-color: var(--pos-color-dark-ribbon-color);
  --pos-color-ribbon-text: var(--pos-color-dark-ribbon-text);

  /* buttons */
  --pos-color-button-primary-fill-normal: var(--pos-color-dark-button-primary-fill-normal);
  --pos-color-button-primary-fill-hover: var(--pos-color-dark-button-primary-fill-hover);
  --pos-color-button-primary-stroke-normal: var(--pos-color-dark-button-primary-stroke-normal);
  --pos-color-button-primary-stroke-hover: var(--pos-color-dark-button-primary-stroke-hover);
  --pos-color-button-primary-text-normal: var(--pos-color-dark-button-primary-text-normal);
  --pos-color-button-primary-text-hover: var(--pos-color-dark-button-primary-text-hover);

  --pos-color-button-secondary-fill-normal-transparent: var(--pos-color-dark-button-secondary-fill-normal-transparent);
  --pos-color-button-secondary-fill-normal: var(--pos-color-dark-button-secondary-fill-normal);
  --pos-color-button-secondary-fill-hover-transparent: var(--pos-color-dark-button-secondary-fill-hover-transparent);
  --pos-color-button-secondary-fill-hover: var(--pos-color-dark-button-secondary-fill-hover);
  --pos-color-button-secondary-stroke-normal: var(--pos-color-dark-button-secondary-stroke-normal);
  --pos-color-button-secondary-stroke-hover: var(--pos-color-dark-button-secondary-stroke-hover);
  --pos-color-button-secondary-text-normal: var(--pos-color-dark-button-secondary-text-normal);
  --pos-color-button-secondary-text-hover: var(--pos-color-dark-button-secondary-text-hover);

  /* backgrounds */
  --pos-color-page-background: var(--pos-color-dark-page-background);
  --pos-color-page-background-transparent: var(--pos-color-dark-page-background-transparent);
  --pos-color-panel-background: var(--pos-color-dark-panel-background);
  --pos-color-highlighted-background: var(--pos-color-dark-highlighted-background);
  --pos-color-divider-lines: var(--pos-color-dark-divider-lines);
  --pos-color-shadow: var(--pos-color-dark-shadow);

  /* input fields */
  --pos-color-input-field-background: var(--pos-color-dark-input-field-background);
  --pos-color-input-field-border: var(--pos-color-dark-input-field-border);
  --pos-color-input-field-text: var(--pos-color-dark-input-field-text);

  /* utility */
  --pos-color-important-normal: var(--pos-color-dark-important-normal);
  --pos-color-important-hover: var(--pos-color-dark-important-hover);
  --pos-color-important-disabled: var(--pos-color-dark-important-disabled);

  --pos-color-confirmation-normal: var(--pos-color-dark-confirmation-normal);
  --pos-color-confirmation-hover: var(--pos-color-dark-confirmation-hover);
  --pos-color-confirmation-disabled: var(--pos-color-dark-confirmation-disabled);

  --pos-color-warning-normal: var(--pos-color-dark-warning-normal);
  --pos-color-warning-hover: var(--pos-color-dark-warning-hover);
  --pos-color-warning-disabled: var(--pos-color-dark-warning-disabled);
  --card-bg-color-from: var(--card-bg-color-dark-from);
  --card-bg-color-to: var(--card-bg-color-dark-to);

  --subtitle-gradient-from: var(--subtitle-gradient-dark-from);

  --subtitle-gradient-to: var(--subtitle-gradient-dark-to);

  --stroke: var(--stroke-dark);

  --pos-color-complex-box-gradient: var(--pos-color-dark-complex-box-gradient);

  --pos-color-complex-box-top-border: var(--pos-color-dark-complex-box-top-border);
}

/* colors based on the system preference
------------------------------ */
@media (prefers-color-scheme: dark) {
  :root {
    /* general elements */
    --pos-color-prominent: var(--pos-color-dark-prominent);
    --pos-color-normal: var(--pos-color-dark-normal);
    --pos-color-supplementary: var(--pos-color-dark-supplementary);
    --pos-color-graphic: var(--pos-color-dark-graphic);
    --pos-color-inverted: var(--pos-color-dark-inverted);
    --pos-color-interactive: var(--pos-color-dark-interactive);
    --pos-color-interactive: var(--pos-color-dark-interactive);
    --pos-color-interactive-hover: var(--pos-color-dark-interactive-hover);
    --pos-color-interactive-disabled: var(--pos-color-dark-interactive-disabled);

    /* prominent elements */
    --pos-color-colorful-background: var(--pos-color-dark-colorful-background);
    --pos-color-colorful-background-hover: var(--pos-color-dark-colorful-background-hover);
    --pos-color-colorful-background-normal: var(--pos-color-dark-colorful-background-normal);
    --pos-color-colorful-background-supplementary: var(--pos-color-dark-colorful-background-supplementary);
    --pos-color-ribbon-color: var(--pos-color-dark-ribbon-color);
    --pos-color-ribbon-text: var(--pos-color-dark-ribbon-text);

    /* buttons */
    --pos-color-button-primary-fill-normal: var(--pos-color-dark-button-primary-fill-normal);
    --pos-color-button-primary-fill-hover: var(--pos-color-dark-button-primary-fill-hover);
    --pos-color-button-primary-stroke-normal: var(--pos-color-dark-button-primary-stroke-normal);
    --pos-color-button-primary-stroke-hover: var(--pos-color-dark-button-primary-stroke-hover);
    --pos-color-button-primary-text-normal: var(--pos-color-dark-button-primary-text-normal);
    --pos-color-button-primary-text-hover: var(--pos-color-dark-button-primary-text-hover);

    --pos-color-button-secondary-fill-normal-transparent: var(--pos-color-dark-button-secondary-fill-normal-transparent);
    --pos-color-button-secondary-fill-normal: var(--pos-color-dark-button-secondary-fill-normal);
    --pos-color-button-secondary-fill-hover-transparent: var(--pos-color-dark-button-secondary-fill-hover-transparent);
    --pos-color-button-secondary-fill-hover: var(--pos-color-dark-button-secondary-fill-hover);
    --pos-color-button-secondary-stroke-normal: var(--pos-color-dark-button-secondary-stroke-normal);
    --pos-color-button-secondary-stroke-hover: var(--pos-color-dark-button-secondary-stroke-hover);
    --pos-color-button-secondary-text-normal: var(--pos-color-dark-button-secondary-text-normal);
    --pos-color-button-secondary-text-hover: var(--pos-color-dark-button-secondary-text-hover);

    /* backgrounds */
    --pos-color-page-background: var(--pos-color-dark-page-background);
    --pos-color-page-background-transparent: var(--pos-color-dark-page-background-transparent);
    --pos-color-panel-background: var(--pos-color-dark-panel-background);
    --pos-color-highlighted-background: var(--pos-color-dark-highlighted-background);
    --pos-color-divider-lines: var(--pos-color-dark-divider-lines);
    --pos-color-shadow: var(--pos-color-dark-shadow);

    /* input fields */
    --pos-color-input-field-background: var(--pos-color-dark-input-field-background);
    --pos-color-input-field-border: var(--pos-color-dark-input-field-border);
    --pos-color-input-field-text: var(--pos-color-dark-input-field-text);

    /* utility */
    --pos-color-important-normal: var(--pos-color-dark-important-normal);
    --pos-color-important-hover: var(--pos-color-dark-important-hover);
    --pos-color-important-disabled: var(--pos-color-dark-important-disabled);

    --pos-color-confirmation-normal: var(--pos-color-dark-confirmation-normal);
    --pos-color-confirmation-hover: var(--pos-color-dark-confirmation-hover);
    --pos-color-confirmation-disabled: var(--pos-color-dark-confirmation-disabled);

    --pos-color-warning-normal: var(--pos-color-dark-warning-normal);
    --pos-color-warning-hover: var(--pos-color-dark-warning-hover);
    --pos-color-warning-disabled: var(--pos-color-dark-warning-disabled);
  }
}


/* fonts
============================================================================ */
:root {

  @font-face {
    font-family: 'Gotham';
    src: url('https://uploads.prod01.oregon.platform-os.com/instances/1374/assets/fonts/Gotham-Bold.woff2?v=3') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Gotham';
    src: url('https://uploads.platformos.dev/instances/85/assets/fonts/Gotham-Medium.woff2?v=subset') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Gotham';
    src: url('https://uploads.platformos.dev/instances/85/assets/fonts/Gotham-Book.woff2?v=subset') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }


  --pos-font-default: Gotham,
  system-ui,
  sans-serif;
  /* Default font for the whole page */
  --pos-font-heading: 'Source Code Pro',
  'Consolas',
  monospace;
  /* Font for headings */
}


/* typography
============================================================================ */

/* Default (1440px) */
:root {
  --pos-hero-page-title: 56px;
  /* Font size for the hero page title */
  --pos-hero-line-height: 64px;
  /* Line height for the hero page title */
  --pos-headline-1: 40px;
  /* Font size for headline 1 */
  --pos-headline-1-line-height: 42px;
  /* Line height for headline 1 */
  --pos-headline-2: 30px;
  /* Font size for headline 2 */
  --pos-headline-2-line-height: 34px;
  /* Line height for headline 2 */
  --pos-headline-3: 24px;
  /* Font size for headline 3 */
  --pos-headline-3-line-height: 32px;
  /* Line height for headline 3 */
  --pos-headline-4: 20px;
  /* Font size for headline 4 */
  --pos-headline-4-line-height: 28px;
  /* Line height for headline 4 */
}

/* Large screens (1920px) */
@media (min-width: 1920px) {
  :root {
    --pos-hero-page-title: 72px;
    /* Font size for the hero page title */
    --pos-hero-line-height: 80px;
    /* Line height for the hero page title */
    --pos-headline-1: 48px;
    /* Font size for headline 1 */
    --pos-headline-1-line-height: 48px;
    /* Line height for headline 1 */
    --pos-headline-2: 30px;
    /* Font size for headline 2 */
    --pos-headline-2-line-height: 34px;
    /* Line height for headline 2 */
    --pos-headline-3: 24px;
    /* Font size for headline 3 */
    --pos-headline-3-line-height: 32px;
    /* Line height for headline 3 */
    --pos-headline-4: 20px;
    /* Font size for headline 4 */
    --pos-headline-4-line-height: 28px;
    /* Line height for headline 4 */
  }
}

/* Medium screens (1024px) */
@media (max-width: 1024px) {
  :root {
    --pos-hero-page-title: 48px;
    /* Font size for the hero page title */
    --pos-hero-line-height: 56px;
    /* Line height for the hero page title */
    --pos-headline-1: 40px;
    /* Font size for headline 1 */
    --pos-headline-1-line-height: 40px;
    /* Line height for headline 1 */
    --pos-headline-2: 28px;
    /* Font size for headline 2 */
    --pos-headline-2-line-height: 32px;
    /* Line height for headline 2 */
    --pos-headline-3: 20px;
    /* Font size for headline 3 */
    --pos-headline-3-line-height: 24px;
    /* Line height for headline 3 */
    --pos-headline-4: 18px;
    /* Font size for headline 4 */
    --pos-headline-4-line-height: 24px;
    /* Line height for headline 4 */
  }
}

/* Small screens (600px) */
@media (max-width: 600px) {
  :root {
    --pos-hero-page-title: 32px;
    /* Font size for the hero page title */
    --pos-hero-line-height: 40px;
    /* Line height for the hero page title */
    --pos-headline-1: 28px;
    /* Font size for headline 1 */
    --pos-headline-1-line-height: 28px;
    /* Line height for headline 1 */
    --pos-headline-2: 24px;
    /* Font size for headline 2 */
    --pos-headline-2-line-height: 26px;
    /* Line height for headline 2 */
    --pos-headline-3: 20px;
    /* Font size for headline 3 */
    --pos-headline-3-line-height: 24px;
    /* Line height for headline 3 */
    --pos-headline-4: 18px;
    /* Font size for headline 4 */
    --pos-headline-4-line-height: 20px;
    /* Line height for headline 4 */
  }
}


/* spacing
============================================================================ */

/* Default (1440px) */
:root {
  /* paddings */
  --pos-padding-cards-boxes: 24px;
  /* Padding for cards and boxes */
  --pos-padding-table-cells: 16px;
  /* Padding for table cells */

  /* gaps */
  --pos-gap-section-elements: 40px;
  /* Gap between elements in a section */
  --pos-gap-section-title-content: 40px;
  /* Gap between section title and content */
  --pos-gap-section-section: 80px;
  /* Gap between sections */
  --pos-gap-card-card: 24px;
  /* Gap between cards */
  --pos-gap-text-content: 16px;
  /* Gap between text content */
  --pos-gap-card-elements: 16px;
  /* Gap between elements in a card */
  --pos-gap-content-footer: 40px;
  /* Gap between content and footer */
  --pos-gap-input-button: -4px;
  /* Gap between input and button */
  --pos-gap-n-button: 16px;
  /* Gap between n buttons */
  --pos-gap-s-button: 8px;
  /* Gap between s buttons */
  --pos-gap-tag-v: 8px;
  /* Gap between tags vertically */
  --pos-gap-tag-h: 16px;
  /* Gap between tags horizontally */
  --pos-gap-step-step: 24px;
  /* Gap between steps */
  --pos-gap-step-button: 24px;
  /* Gap between step and button */
  --pos-gap-from-field: 16px;
  /* Gap between form fields */
  --pos-gap-question-card: 8px;
  /* Gap between question cards */
  --pos-gap-page-content-x-margin: 200px;
  /* Margin for the page content */
  --pos-gap-section-elements: 40px;
  /* Gap between elements in a section */
  --pos-gap-section-title-content: 40px;
  /* Gap between section title and content */
  --pos-gap-section-section: 80px;
  /* Gap between sections */
  --pos-gap-card-card: 24px;
  /* Gap between cards */
  --pos-gap-text-content: 16px;
  /* Gap between text content */
  --pos-gap-card-elements: 16px;
  /* Gap between elements in a card */
  --pos-gap-content-footer: 40px;
  /* Gap between content and footer */
  --pos-gap-input-button: -4px;
  /* Gap between input and button */
  --pos-gap-n-button: 16px;
  /* Gap between n buttons */
  --pos-gap-s-button: 8px;
  /* Gap between s buttons */
  --pos-gap-tag-v: 8px;
  /* Gap between tags vertically */
  --pos-gap-tag-h: 16px;
  /* Gap between tags horizontally */
  --pos-gap-step-step: 24px;
  /* Gap between steps */
  --pos-gap-step-button: 24px;
  /* Gap between step and button */
  --pos-gap-from-field: 16px;
  /* Gap between form fields */
  --pos-gap-question-card: 8px;
  /* Gap between question cards */
  --pos-gap-page-content-x-margin: 120px;
  /* Margin for the page content */

  /* icon */
  --pos-icon-xs: 12px;
  /* Icon size xs */
  --pos-icon-s: 16px;
  /* Icon size s */
  --pos-icon-m: 20px;
  /* Icon size m */
  --pos-icon-l: 24px;
  /* Icon size l */
  --pos-icon-xl: 32px;
  /* Icon size xl */
  --pos-icon-xxl: 64px;
  /* Icon size xxl */
}

/* Large screens (1920px) */
@media (min-width: 1920px) {
  :root {
    /* paddings */
    --pos-padding-cards-boxes: 40px;
    /* Padding for cards and boxes */
    --pos-padding-table-cells: 16px;
    /* Padding for table cells */

    /* gaps */
    --pos-gap-section-elements: 40px;
    /* Gap between elements in a section */
    --pos-gap-section-title-content: 80px;
    /* Gap between section title and content */
    --pos-gap-section-section: 120px;
    /* Gap between sections */
    --pos-gap-card-card: 40px;
    /* Gap between cards */
    --pos-gap-text-content: 16px;
    /* Gap between text content */
    --pos-gap-card-elements: 24px;
    /* Gap between elements in a card */
    --pos-gap-content-footer: 40px;
    /* Gap between content and footer */
    --pos-gap-input-button: -4px;
    /* Gap between input and button */
    --pos-gap-n-button: 16px;
    /* Gap between n buttons */
    --pos-gap-s-button: 8px;
    /* Gap between s buttons */
    --pos-gap-tag-v: 8px;
    /* Gap between tags vertically */
    --pos-gap-tag-h: 16px;
    /* Gap between tags horizontally */
    --pos-gap-step-step: 24px;
    /* Gap between steps */
    --pos-gap-step-button: 24px;
    /* Gap between step and button */
    --pos-gap-from-field: 16px;
    /* Gap between form fields */
    --pos-gap-question-card: 8px;
    /* Gap between question cards */
    --pos-gap-page-content-x-margin: 40px;
    /* Margin for the page content */
    --pos-gap-section-elements: 40px;
    /* Gap between elements in a section */
    --pos-gap-section-title-content: 80px;
    /* Gap between section title and content */
    --pos-gap-section-section: 120px;
    /* Gap between sections */
    --pos-gap-card-card: 40px;
    /* Gap between cards */
    --pos-gap-text-content: 16px;
    /* Gap between text content */
    --pos-gap-card-elements: 24px;
    /* Gap between elements in a card */
    --pos-gap-content-footer: 40px;
    /* Gap between content and footer */
    --pos-gap-input-button: -4px;
    /* Gap between input and button */
    --pos-gap-n-button: 16px;
    /* Gap between n buttons */
    --pos-gap-s-button: 8px;
    /* Gap between s buttons */
    --pos-gap-tag-v: 8px;
    /* Gap between tags vertically */
    --pos-gap-tag-h: 16px;
    /* Gap between tags horizontally */
    --pos-gap-step-step: 24px;
    /* Gap between steps */
    --pos-gap-step-button: 24px;
    /* Gap between step and button */
    --pos-gap-from-field: 16px;
    /* Gap between form fields */
    --pos-gap-question-card: 8px;
    /* Gap between question cards */
    --pos-gap-page-content-x-margin: 40px;
    /* Margin for the page content */

    /* icon */
    --pos-icon-xs: 12px;
    /* Icon size xs */
    --pos-icon-s: 16px;
    /* Icon size s */
    --pos-icon-m: 20px;
    /* Icon size m */
    --pos-icon-l: 24px;
    /* Icon size l */
    --pos-icon-xl: 32px;
    /* Icon size xl */
    --pos-icon-xxl: 64px;
    /* Icon size xxl */
  }
}

/* Medium screens (1024px) */
@media (max-width: 1024px) {
  :root {
    /* paddings */
    --pos-padding-cards-boxes: 24px;
    /* Padding for cards and boxes */
    --pos-padding-table-cells: 16px;
    /* Padding for table cells */

    /* gaps */
    --pos-gap-section-elements: 40px;
    /* Gap between elements in a section */
    --pos-gap-section-title-content: 40px;
    /* Gap between section title and content */
    --pos-gap-section-section: 80px;
    /* Gap between sections */
    --pos-gap-card-card: 24px;
    /* Gap between cards */
    --pos-gap-text-content: 16px;
    /* Gap between text content */
    --pos-gap-card-elements: 16px;
    /* Gap between elements in a card */
    --pos-gap-content-footer: 40px;
    /* Gap between content and footer */
    --pos-gap-input-button: -4px;
    /* Gap between input and button */
    --pos-gap-n-button: 16px;
    /* Gap between n buttons */
    --pos-gap-s-button: 8px;
    /* Gap between s buttons */
    --pos-gap-tag-v: 8px;
    /* Gap between tags vertically */
    --pos-gap-tag-h: 16px;
    /* Gap between tags horizontally */
    --pos-gap-step-step: 24px;
    /* Gap between steps */
    --pos-gap-step-button: 24px;
    /* Gap between step and button */
    --pos-gap-from-field: 16px;
    /* Gap between form fields */
    --pos-gap-question-card: 8px;
    /* Gap between question cards */
    --pos-gap-page-content-x-margin: 80px;
    /* Margin for the page content */

    /* icon */
    --pos-icon-xs: 12px;
    /* Icon size xs */
    --pos-icon-s: 16px;
    /* Icon size s */
    --pos-icon-m: 20px;
    /* Icon size m */
    --pos-icon-l: 24px;
    /* Icon size l */
    --pos-icon-xl: 32px;
    /* Icon size xl */
    --pos-icon-xxl: 64px;
    /* Icon size xxl */
  }
}

/* Small screens (393px) */
@media (max-width: 393px) {
  :root {
    /* paddings */
    --pos-padding-cards-boxes: 24px;
    /* Padding for cards and boxes */
    --pos-padding-table-cells: 16px;
    /* Padding for table cells */

    /* gaps */
    --pos-gap-section-elements: 16px;
    /* Gap between elements in a section */
    --pos-gap-section-title-content: 32px;
    /* Gap between section title and content */
    --pos-gap-section-section: 80px;
    /* Gap between sections */
    --pos-gap-card-card: 16px;
    /* Gap between cards */
    --pos-gap-text-content: 16px;
    /* Gap between text content */
    --pos-gap-card-elements: 16px;
    /* Gap between elements in a card */
    --pos-gap-content-footer: 40px;
    /* Gap between content and footer */
    --pos-gap-input-button: -4px;
    /* Gap between input and button */
    --pos-gap-n-button: 16px;
    /* Gap between n buttons */
    --pos-gap-s-button: 8px;
    /* Gap between s buttons */
    --pos-gap-tag-v: 8px;
    /* Gap between tags vertically */
    --pos-gap-tag-h: 16px;
    /* Gap between tags horizontally */
    --pos-gap-step-step: 24px;
    /* Gap between steps */
    --pos-gap-step-button: 24px;
    /* Gap between step and button */
    --pos-gap-from-field: 16px;
    /* Gap between form fields */
    --pos-gap-question-card: 8px;
    /* Gap between question cards */
    --pos-gap-page-content-x-margin: 24px;
    /* Margin for the page content */

    /* icon */
    --pos-icon-xs: 12px;
    /* Icon size xs */
    --pos-icon-s: 16px;
    /* Icon size s */
    --pos-icon-m: 20px;
    /* Icon size m */
    --pos-icon-l: 24px;
    /* Icon size l */
    --pos-icon-xl: 32px;
    /* Icon size xl */
    --pos-icon-xxl: 64px;
    /* Icon size xxl */
  }
}

/* corners
============================================================================ */
:root {
  --pos-corner-panel: 4px;
  /* Corner radius for panels */
  --pos-corner-popup: 4px;
  /* Corner radius for popups */
  --pos-corner-card: 4px;
  /* Corner radius for cards */
  --pos-corner-button: 4px;
  /* Corner radius for buttons */
  --pos-corner-input: 0px;
  /* Corner radius for inputs */
  --pos-corner-tag: 40px;
  /* Corner radius for tags */
}


/* buttons and inputs shape
============================================================================ */
:root {
  --pos-padding-input: 8px;
  /* Padding for inputs */

  --pos-height-input: 44px;
  /* Height of inputs */

  --pos-border-input: 1px;
  /* Border of inputs */
}