/*
  stores configurable variables used for styling

  colors
    light mode
  fonts
  spacing
  buttons and inputs shape
  card and panel shape
*/



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

/* light mode */
/* -------------------------------------------------------------------------------- */
:root {

  /* general content */
  /* ---------------------------------------- */
  /* whole page background */
  --pos-color-light-page-background: rgb(var(--base));
  /* background color used under the content (grid, cards, panels) */
  --pos-color-light-content-background: rgb(var(--panel));
  /* general content text */
  --pos-color-light-content-text: rgb(var(--normal));
  /* general content icons (moight be different shade due to contrast) */
  --pos-color-light-content-icon: rgb(var(--graphic));
  /* sidenotes, metadata, table headers */
  --pos-color-light-content-text-supplementary: rgb(var(--supplementary));
  /* prominent text used to highlight important information */
  --pos-color-light-content-text-prominent: var(--prominent);
  /* content text when placed on an inverted contrasty background */
  --pos-color-light-content-inverted-text: rgb(var(--inverted));
  /* dividers, separators, frames, table rows */
  --pos-color-light-frame: rgb(var(--divider));
  /* highlighted elements background, like a navigation item when it is hovered or panels that need to stand out from the rest of the page like a filters panel */
  --pos-color-light-highlight-background: rgb(var(--highlighted));
  /* highlighted elements text and icons */
  --pos-color-light-highlight-text: rgb(var(--highlighted));
  /* background of sections of the page that needs to really stand out, like call to actions */
  --pos-color-light-standout-background: rgb(var(--colorful));
  /* background of sections of the page that needs to really stand out when poitner hovers over */
  --pos-color-light-standout-background-hover: rgb(var(--colorful-hover));
  /* text and icons placed on the sections that needs to really stand out */
  --pos-color-light-standout-text: #fff;



  /* interactive elements */
  /* ---------------------------------------- */
  /* active elements suggesting a possible interaction */
  --pos-color-light-interactive: rgb(var(--interactive-text));
  /* active elements with possible interaction when a pointer is over them */
  --pos-color-light-interactive-hover: rgb(var(--interactive-hover));
  /* active elements with possible interaction when they are pressed */
  --pos-color-light-interactive-active: rgb(var(--interactive-hover));
  /* disabled elements that could become or has been interactive */
  --pos-color-light-interactive-disabled: rgb(var(--interactive-disabled));

  /* primary action button background */
  --pos-color-light-button-primary-background: rgb(var(--button-primary));
  /* primary action button text and icons */
  --pos-color-light-button-primary-text: rgb(var(--button-primary-foreground));
  /* border around primary action button */
  --pos-color-light-button-primary-frame: rgb(var(--button-primary-stroke));
  /* primary action button background when a pointer is over it */
  --pos-color-light-button-primary-hover-background: rgb(var(--button-primary-hover));
  /* primary action button text and icons icons when a pointer is over it */
  --pos-color-light-button-primary-hover-text: rgb(var(--button-primary-foreground-hover));
  /* border around primary action button when a pointer is over it */
  --pos-color-light-button-primary-hover-frame: rgb(var(--button-primary-stroke-hover));
  /* primary action button background when it is being pressed */
  --pos-color-light-button-primary-active-background: var(--pos-color-light-button-primary-hover-background);
  /* primary action button text and icons icons when it is being pressed */
  --pos-color-light-button-primary-active-text: var(--pos-color-light-button-primary-hover-text);
  /* border around primary action button when it is being pressed */
  --pos-color-light-button-primary-active-frame: var(--pos-color-light-button-primary-hover-frame);
  /* primary action button background when it is disabled */
  --pos-color-light-button-primary-disabled-background: rgba(var(--button-primary), .5);
  /* primary action button text and icons when it is disabled */
  --pos-color-light-button-primary-disabled-text: #ffffff;
  /* border around primary action button when it is disabled */
  --pos-color-light-button-primary-disabled-frame: rgba(var(--button-primary), .5);

  /* secondary action button background */
  --pos-color-light-button-secondary-background: rgb(var(--button-secondary));
  /* secondary action button text and icons */
  --pos-color-light-button-secondary-text: rgb(var(--button-secondary-foreground));
  /* border around secondary action button */
  --pos-color-light-button-secondary-frame: rgb(var(--button-secondary-stroke));
  /* secondary action button background when a pointer is over it */
  --pos-color-light-button-secondary-hover-background: rgb(var(--button-secondary-hover));
  /* secondary action button text and icons icons when a pointer is over it */
  --pos-color-light-button-secondary-hover-text: rgb(var(--button-secondary-foreground-hover));
  /* border around secondary action button when a pointer is over it */
  --pos-color-light-button-secondary-hover-frame: rgb(var(--button-secondary-stroke-hover));
  /* secondary action button background when it is being pressed */
  --pos-color-light-button-secondary-active-background: var(--pos-color-light-button-secondary-hover-background);
  /* secondary action button text and icons icons when it is being pressed */
  --pos-color-light-button-secondary-active-text: var(--pos-color-light-button-secondary-hover-text);
  /* border around secondary action button when it is being pressed */
  --pos-color-light-button-secondary-active-frame: var(--pos-color-light-button-secondary-hover-frame);
  /* secondary action button background when it is disabled */
  --pos-color-light-button-secondary-disabled-background: rgba(var(--button-secondary), .5);
  /* secondary action button text and icons when it is disabled */
  --pos-color-light-button-secondary-disabled-text: #82abdd;
  /* border around secondary action button when it is disabled */
  --pos-color-light-button-secondary-disabled-frame: rgba(var(--button-secondary), .5);


  /* forms */
  /* ---------------------------------------- */

  /* placeholder text in input fields */
  --pos-color-light-input-placeholder: rgb(var(--pos-color-content-supplementary));

  /* input field background */
  --pos-color-light-input-background: rgb(var(--input));
  /* input field text and icon */
  --pos-color-light-input-text: rgb(var(--input-foreground));
  /* border around input field */
  --pos-color-light-input-frame: rgb(var(--input-border));
  /* input field background when a pointer is over it */
  --pos-color-light-input-hover-background: rgb(var(--input-background));
  /* input field text and icon when a pointer is over it */
  --pos-color-light-input-hover-text: rgb(var(--input-foreground));
  /* border around input field when a pointer is over it */
  --pos-color-light-input-hover-frame: rgb(var(--input-border));
  /* input field background when it is being focused */
  --pos-color-light-input-active-background: rgb(var(--input));
  /* input field text and icon when it is being focused */
  --pos-color-light-input-active-text: rgb(var(--input-foreground));
  /* border around input field when it is being focused */
  --pos-color-light-input-active-frame: rgb(var(--pos-color-input-default-border));
  /* background of disabled input field */
  --pos-color-light-input-disabled-background: var(--pos-color-light-input-background);
  /* text and icon of disabled input field */
  --pos-color-light-input-disabled-text: color-mix(in srgb, var(--pos-color-light-input-text) 40%, transparent 60%);
  /* border around input field when it is disabled */
  --pos-color-light-input-disabled-frame: color-mix(in srgb, var(--pos-color-light-input-frame) 40%, transparent 60%);


  /* utility */
  /* ---------------------------------------- */

  /* errors, actions that can't be undone */
  --pos-color-light-important: rgb(var(--important));
  --pos-color-light-important-hover: rgb(var(--important-hover));
  --pos-color-light-important-disabled: rgb(var(--important-disabled));
  /* warnings, actions that might have unwanted consequences */
  --pos-color-light-warning: rgb(var(--warning));
  --pos-color-light-warning-hover: rgb(var(--warning-hover));
  --pos-color-light-warning-disabled: rgb(var(--warning-disabled));
  /* confirmations of a successful actions */
  --pos-color-light-confirmation: rgb(var(--confirmation));
  --pos-color-light-confirmation-hover: rgb(var(--confirmation-hover));
  --pos-color-light-confirmation-disabled: rgb(var(--confirmation-disabled));

}



/* fonts */
/* ================================================================================ */
:root {
  /* default font for the whole page */
  --pos-font-default: sans-serif;
  /* headings */
  --pos-font-heading: sans-serif;
}