/*
  stores all configurable variables used for styling

  fonts
  colors
  sizes
  shadows
*/




/* fonts
============================================================================ */
:root {
  --font-content: 'Content', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-heading: 'Heading', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}



:root,
::backdrop {

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

  /* light theme
  ========================== */
  /* texts */
  --color-light-rgb-text-prominent: 20, 20, 20;
  --color-light-rgb-text-normal: 55, 65, 81;
  --color-light-rgb-text-supplementary: 107, 114, 128;
  --color-light-rgb-text-inverted: 255, 255, 255;

  /* icons */
  --color-light-rgb-graphic: 64, 85, 104;

  /* interactive elements */
  --color-light-rgb-interactive: 33, 115, 196;
  --color-light-rgb-interactive-graphic: 33, 115, 196;
  --color-light-rgb-interactive-hover: 25, 79, 144;
  --color-light-rgb-interactive-disabled: 217, 235, 252;

  /* prominent elements */
  --color-light-rgb-colorful-background: 255, 255, 255;
  --color-light-rgb-colorful-background-hover: 247, 248, 250;
  --color-light-rgb-colorful-foreground: 55, 64, 81;
  --color-light-rgb-colorful-foreground-supplementary: 107, 114, 128;

  /* backgrounds and frames */
  --color-light-rgb-panel: 255, 255, 255;
  --color-light-rgb-base: 247, 248, 250;
  --color-light-rgb-highlighted: 239, 242, 246;
  --color-light-rgb-divider: 226, 232, 240;
  --color-light-rgb-shadow: 0, 0, 0;

  /* buttons */
  --color-light-rgb-button-primary-fill: 20, 20, 20;
  --color-light-rgb-button-primary-fill-hover: 33, 115, 196;
  --color-light-rgb-button-primary-border: var(--color-light-rgb-button-primary-fill);
  --color-light-rgb-button-primary-border-hover: var(--color-light-rgb-button-primary-fill-hover);
  --color-light-rgb-button-primary-foreground: 255, 255, 255;
  --color-light-rgb-button-primary-foreground-hover: var(--color-light-rgb-button-primary-foreground);

  --color-light-rgb-button-secondary-fill: null;
  --color-light-rgb-button-secondary-fill-hover: null;
  --color-light-rgb-button-secondary-border: 226, 232, 240;
  --color-light-rgb-button-secondary-border-hover: 20, 20, 20;
  --color-light-rgb-button-secondary-foreground: 33, 115, 196;
  --color-light-rgb-button-secondary-foreground-hover: 20, 20, 20;

  /* forms */
  --color-light-rgb-input-border: 107, 114, 128;
  --color-light-rgb-input-background: 255, 255, 255;
  --color-light-rgb-input-foreground: 55, 65, 81;

  /* utility */
  --color-light-rgb-important: 185, 28, 28;
  --color-light-rgb-important-hover: 202, 58, 49;
  --color-light-rgb-important-disabled: 254, 202, 202;
  --color-light-rgb-confirmation: 15, 123, 10;
  --color-light-rgb-confirmation-hover: 9, 143, 105;
  --color-light-rgb-confirmation-disabled: 187, 221, 211;
  --color-light-rgb-warning: 243, 177, 78;
  --color-light-rgb-warning-hover: 255, 190, 91;
  --color-light-rgb-warning-disabled: 255, 233, 200;

}

/* rbg parts based on the theme choosen */
:root,
::backdrop {
  /* texts */
  --color-rgb-text-prominent: var(--color-light-rgb-text-prominent);
  --color-rgb-text-normal: var(--color-light-rgb-text-normal);
  --color-rgb-text-supplementary: var(--color-light-rgb-text-supplementary);
  --color-rgb-text-inverted: var(--color-light-rgb-text-inverted);

  /* icons */
  --color-rgb-graphic: var(--color-light-rgb-graphic);

  /* interactive elements */
  --color-rgb-interactive: var(--color-light-rgb-interactive);
  --color-rgb-interactive-graphic: var(--color-light-rgb-interactive-graphic);
  --color-rgb-interactive-hover: var(--color-light-rgb-interactive-hover);
  --color-rgb-interactive-disabled: var(--color-light-rgb-interactive-disabled);

  /* prominent elements */
  --color-rgb-colorful-background: var(--color-light-rgb-colorful-background);
  --color-rgb-colorful-background-hover: var(--color-light-rgb-colorful-background-hover);
  --color-rgb-colorful-foreground: var(--color-light-rgb-colorful-foreground);
  --color-rgb-colorful-foreground-supplementary: var(--color-light-rgb-colorful-foreground-supplementary);

  /* backgrounds and frames */
  --color-rgb-panel: var(--color-light-rgb-panel);
  --color-rgb-base: var(--color-light-rgb-base);
  --color-rgb-highlighted: var(--color-light-rgb-highlighted);
  --color-rgb-divider: var(--color-light-rgb-divider);
  --color-rgb-shadow: var(--color-light-rgb-shadow);

  /* buttons */
  --color-rgb-button-primary-fill: var(--color-light-rgb-button-primary-fill);
  --color-rgb-button-primary-fill-hover: var(--color-light-rgb-button-primary-fill-hover);
  --color-rgb-button-primary-border: var(--color-light-rgb-button-primary-border);
  --color-rgb-button-primary-border-hover: var(--color-light-rgb-button-primary-border-hover);
  --color-rgb-button-primary-foreground: var(--color-light-rgb-button-primary-foreground);
  --color-rgb-button-primary-foreground-hover: var(--color-light-rgb-button-primary-foreground-hover);

  --color-rgb-button-secondary-fill: var(--color-light-rgb-button-secondary-fill);
  --color-rgb-button-secondary-fill-hover: var(--color-light-rgb-button-secondary-fill-hover);
  --color-rgb-button-secondary-border: var(--color-light-rgb-button-secondary-border);
  --color-rgb-button-secondary-border-hover: var(--color-light-rgb-button-secondary-border-hover);
  --color-rgb-button-secondary-foreground: var(--color-light-rgb-button-secondary-foreground);
  --color-rgb-button-secondary-foreground-hover: var(--color-light-rgb-button-secondary-foreground-hover);

  /* forms */
  --color-rgb-input-border: var(--color-light-rgb-input-border);
  --color-rgb-input-background: var(--color-light-rgb-input-background);
  --color-rgb-input-foreground: var(--color-light-rgb-input-foreground);

  /* utility */
  --color-rgb-important: var(--color-light-rgb-important);
  --color-rgb-important-hover: var(--color-light-rgb-important-hover);
  --color-rgb-important-disabled: var(--color-light-rgb-important-dis);
  --color-rgb-confirmation: var(--color-light-rgb-confirmation);
  --color-rgb-confirmation-hover: var(--color-light-rgb-confirmation-hover);
  --color-rgb-confirmation-disabled: var(--color-light-rgb-confirmation-disabled);
  --color-rgb-warning: var(--color-light-rgb-warning);
  --color-rgb-warning-hover: var(--color-light-rgb-warning-hover);
  --color-rgb-warning-disabled: var(--color-light-rgb-warning-disabled);
}

/* negotiated rgb parts to an actual color */
:root {
  /* texts */
  --color-text-prominent: rgb(var(--color-rgb-text-prominent));
  --color-text-normal: rgb(var(--color-rgb-text-normal));
  --color-text-supplementary: rgb(var(--color-rgb-text-supplementary));
  --color-text-inverted: rgb(var(--color-rgb-text-inverted));

  /* icons */
  --color-graphic: rgb(var(--color-rgb-graphic));

  /* interactive elements */
  --color-interactive: rgb(var(--color-rgb-interactive));
  --color-interactive-graphic: rgb(var(--color-rgb-interactive-graphic));
  --color-interactive-hover: rgb(var(--color-rgb-interactive-hover));
  --color-interactive-disabled: rgb(var(--color-rgb-interactive-disabled));

  /* prominent elements */
  --color-colorful-background: rgb(var(--color-rgb-colorful-background));
  --color-colorful-background-hover: rgb(var(--color-rgb-colorful-background-hover));
  --color-colorful-foreground: rgb(var(--color-rgb-colorful-foreground));
  --color-colorful-foreground-supplementary: rgb(var(--color-rgb-colorful-foreground-supplementary));

  /* backgrounds and frames */
  --color-panel: rgb(var(--color-rgb-panel));
  --color-base: rgb(var(--color-rgb-base));
  --color-highlighted: rgb(var(--color-rgb-highlighted));
  --color-divider: rgb(var(--color-rgb-divider));
  --color-shadow: rgb(var(--color-rgb-shadow));

  /* buttons */
  --color-button-primary-fill: rgb(var(--color-rgb-button-primary-fill));
  --color-button-primary-fill-hover: rgb(var(--color-rgb-button-primary-fill-hover));
  --color-button-primary-border: rgb(var(--color-rgb-button-primary-border));
  --color-button-primary-border-hover: rgb(var(--color-rgb-button-primary-border-hover));
  --color-button-primary-foreground: rgb(var(--color-rgb-button-primary-foreground));
  --color-button-primary-foreground-hover: rgb(var(--color-rgb-button-primary-foreground-hover));

  --color-button-secondary-fill: rgb(var(--color-rgb-button-secondary-fill));
  --color-button-secondary-fill-hover: rgb(var(--color-rgb-button-secondary-fill-hover));
  --color-button-secondary-border: rgb(var(--color-rgb-button-secondary-border));
  --color-button-secondary-border-hover: rgb(var(--color-rgb-button-secondary-border-hover));
  --color-button-secondary-foreground: rgb(var(--color-rgb-button-secondary-foreground));
  --color-button-secondary-foreground-hover: rgb(var(--color-rgb-button-secondary-foreground-hover));

  /* forms */
  --color-input-border: rgb(var(--color-rgb-input-border));
  --color-input-background: rgb(var(--color-rgb-input-background));
  --color-input-foreground: rgb(var(--color-rgb-input-foreground));

  /* utility */
  --color-important: rgb(var(--color-rgb-important));
  --color-important-hover: rgb(var(--color-rgb-important-hover));
  --color-important-disabled: rgb(var(--color-rgb-important-dis));
  --color-confirmation: rgb(var(--color-rgb-confirmation));
  --color-confirmation-hover: rgb(var(--color-rgb-confirmation-hover));
  --color-confirmation-disabled: rgb(var(--color-rgb-confirmation-disabled));
  --color-warning: rgb(var(--color-rgb-warning));
  --color-warning-hover: rgb(var(--color-rgb-warning-hover));
  --color-warning-disabled: rgb(var(--color-rgb-warning-disabled));
}



/* sizes
============================================================================ */
:root {
  /* layout */
  --spacing-page: 40px;
  --width-page: calc(1151px + var(--spacing-page) * 2);

  --spacing-section: 100px;

  /* cards */
  --spacing-card: 2rem;
  --radius-card: 4px;

  /* buttons */
  --height-button: 2.75em;
  --radius-button: 4px;
  --gap-button: .5rem;

  /* hero-section*/
  --hero-bg-color:rgba(247,248,250,254);
  /* blue-cta*/
  --blue_cta-bg-gradient:linear-gradient(to bottom, rgba(58, 141, 222, 0) 20%, rgba(58, 141, 222, 1));
}

  @media (max-width: 920px) {
    :root {
      --spacing-page: 24px;

      --spacing-section: 40px;
    }
  }



/* shadows
============================================================================ */
:root {
  --shadow-s: 0px 0px 5px 0px rgba(0, 0, 0, .1);
  --shadow-m: 0px 4px 6px 0px rgba(25, 79, 144, .15);
  --shadow-lg: 0px 10px 30px 0px rgba(0, 0, 0, .3);
  --shadow-card: 0px 0px 100px 0px rgba(var(--color-rgb-interactive-hover), .15);
}