/* 
** Naming **

class:      class-example
id:         idExample
var(js):    var_example

*/

:root {


  /** Headings **/
  /* Other */
  --heading-font-family: "Poppins", sans-serif;
  --heading-letter-spacing: 0px;
  --heading-font-weight: 700;
  --heading-text-transform: none;
  --heading-font-style: normal;
  --heading-line-height: 110%;

  /* Size */
  --heading-h1-font-size: 5.6rem;
  --heading-h2-font-size: 4.8rem;
  --heading-h3-font-size: 4rem;
  --heading-h4-font-size: 3.2rem;
  --heading-h5-font-size: 2.4rem;
  --heading-h6-font-size: 2rem;

  /* Extras */
  --heading-h1-line-height: 90%;


  /** Tagline **/
  --tagline-font-family: "Poppins", sans-serif;
  --tagline-letter-spacing: 0px;
  --tagline-font-weight: 600;
  --tagline-font-size: 1.6rem;
  --tagline-line-height: 150%;
  --tagline-font-style: normal;

  /** Text **/
  /* Other */
  --text-font-family: "Work Sans", sans-serif;
  --text-line-height: 150%;
  --text-letter-spacing: -.8px;
  --text-font-style: normal;

  /* Weight */
  --text-normal-font-weight: 400;
  --text-semi-bold-font-weight: 600;
  --text-bold-font-weight: 700;

  /* Size */
  --text-supreme-font-size: 3rem;
  --text-extra-font-size: 2.5rem;
  --text-large-font-size: 2rem;
  --text-medium-font-size: 1.8rem;
  --text-regular-font-size: 1.6rem;
  --text-small-font-size: 1.4rem;
  --text-tiny-font-size: 1.2rem;


  /** Box Shadows **/
  --xxsmall: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  --xsmall: 0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 3px 0px
    rgba(0, 0, 0, 0.1);
  --small: 0px 2px 4px -2px rgba(0, 0, 0, 0.06), 0px 4px 8px -2px
    rgba(0, 0, 0, 0.1);
  --medium: 0px 4px 6px -2px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px
    rgba(0, 0, 0, 0.08);
  --large: 0px 8px 8px -4px rgba(0, 0, 0, 0.03), 0px 20px 24px -4px
    rgba(0, 0, 0, 0.08);
  --xlarge: 0px 0px 50px rgba(0, 0, 0, 0.1);
  --xxlarge: 0px 32px 64px -12px rgba(0, 0, 0, .2);


  /** Colors **/
  /* Color Schemes */
  --color-schemes-color-scheme-1-text: var(--primitives-color-blue);
  --color-schemes-color-scheme-1-text-2: var(--primitives-color-white);
  --color-schemes-color-scheme-1-text-3: var(--primitives-color-black);
  --color-schemes-color-scheme-1-foreground: var(--primitives-color-gray);
  --color-schemes-color-scheme-1-foreground-2: var(--primitives-color-white);
  --color-schemes-color-scheme-1-background: var(--primitives-color-white);
  --color-schemes-color-scheme-1-background-2: var(--primitives-color-gray);
  --color-schemes-color-scheme-1-border: var(--primitives-color-orange);
  --color-schemes-color-scheme-1-border-2: var(--primitives-color-blue);
  --color-schemes-color-scheme-1-accent: var(--primitives-color-blue);
  --color-schemes-color-scheme-1-accent-2: var(--primitives-color-orange);

  /* Transparent */
  --primitives-opacity-transparent: rgba(255, 255, 255, 0);

  /* Neutral */
  --primitives-color-neutral-lightest: rgba(238, 238, 238, 1);
  --primitives-color-neutral-lighter: rgba(204, 204, 204, 1);
  --primitives-color-neutral-light: rgba(170, 170, 170, 1);
  --primitives-color-neutral: rgba(120, 120, 120, 1);
  --primitives-color-neutral-dark: rgba(80, 80, 80, 1);
  --primitives-color-neutral-darker: rgba(50, 50, 50, 1);
  --primitives-color-neutral-darkest: rgba(25, 25, 25, 1);
  
  /* White */
  --primitives-color-white: rgba(255, 255, 255, 1);
  --primitives-opacity-white-60: rgba(255, 255, 255, 0.6);
  --primitives-opacity-white-50: rgba(255, 255, 255, 0.5);
  --primitives-opacity-white-40: rgba(255, 255, 255, 0.4);
  --primitives-opacity-white-30: rgba(255, 255, 255, 0.3);
  --primitives-opacity-white-20: rgba(255, 255, 255, 0.2);
  --primitives-opacity-white-15: rgba(255, 255, 255, 0.15);
  --primitives-opacity-white-10: rgba(255, 255, 255, 0.1);
  --primitives-opacity-white-5: rgba(255, 255, 255, 0.05);

  /* Black */
  --primitives-color-black: rgba(0, 0, 0, 1);
  --primitives-opacity-black-60: rgba(0, 0, 0, 0.6);
  --primitives-opacity-black-50: rgba(0, 0, 0, 0.5);
  --primitives-opacity-black-40: rgba(0, 0, 0, 0.4);
  --primitives-opacity-black-30: rgba(0, 0, 0, 0.3);
  --primitives-opacity-black-20: rgba(0, 0, 0, 0.2);
  --primitives-opacity-black-15: rgba(0, 0, 0, 0.15);
  --primitives-opacity-black-10: rgba(0, 0, 0, 0.1);
  --primitives-opacity-black-5: rgba(0, 0, 0, 0.05);

  /* Blue */
  --primitives-color-blue: #032949;
  --primitives-opacity-blue-60: rgba(3, 41, 73, 0.6);
  --primitives-opacity-blue-50: rgba(3, 41, 73, 0.5);
  --primitives-opacity-blue-40: rgba(3, 41, 73, 0.4);
  --primitives-opacity-blue-30: rgba(3, 41, 73, 0.3);
  --primitives-opacity-blue-20: rgba(3, 41, 73, 0.2);
  --primitives-opacity-blue-15: rgba(3, 41, 73, 0.15);
  --primitives-opacity-blue-10: rgba(3, 41, 73, 0.1);
  --primitives-opacity-blue-5: rgba(3, 41, 73, 0.05);

  /* Gray */
  --primitives-color-gray: #545d64;
  --primitives-opacity-gray-60: rgba(84, 93, 100, 0.6);
  --primitives-opacity-gray-50: rgba(84, 93, 100, 0.5);
  --primitives-opacity-gray-40: rgba(84, 93, 100, 0.4);
  --primitives-opacity-gray-30: rgba(84, 93, 100, 0.3);
  --primitives-opacity-gray-20: rgba(84, 93, 100, 0.2);
  --primitives-opacity-gray-15: rgba(84, 93, 100, 0.15);
  --primitives-opacity-gray-10: rgba(84, 93, 100, 0.1);
  --primitives-opacity-gray-5: rgba(84, 93, 100, 0.05);

  /* Orange */
  --primitives-color-orange: #f08407;
  --primitives-opacity-orange-60: rgba(240, 132, 7, 0.6);
  --primitives-opacity-orange-50: rgba(240, 132, 7, 0.5);
  --primitives-opacity-orange-40: rgba(240, 132, 7, 0.4);
  --primitives-opacity-orange-30: rgba(240, 132, 7, 0.3);
  --primitives-opacity-orange-20: rgba(240, 132, 7, 0.2);
  --primitives-opacity-orange-15: rgba(240, 132, 7, 0.15);
  --primitives-opacity-orange-10: rgba(240, 132, 7, 0.1);
  --primitives-opacity-orange-5: rgba(240, 132, 7, 0.05);


  /** UI **/
  --UI-styles-radius-small: 1rem;
  --UI-styles-radius-medium: 2rem;
  --UI-styles-radius-large: 3rem;
  --UI-styles-stroke-border-width: 1px;
  --UI-styles-stroke-divider-width: 1px;


  /** Buttons **/
  /* Other */
  --button-min-width: 10rem;
  --button-height: 4.5rem;
  --button-margin: 0rem;
  --button-padding: 1rem 1.2rem;
  --button-border: 1px solid var(--color-schemes-color-scheme-1-border);
  --button-border-2: 1px solid var(--color-schemes-color-scheme-1-background);
  --button-border-3: 1px solid var(--color-schemes-color-scheme-1-border-2);

  /* Primary */
  --button-primary-background: var(--color-schemes-color-scheme-1-accent-2);
  --button-primary-color: var(--color-schemes-color-scheme-1-text-2);
  --button-primary-outline-background: none;
  --button-primary-outline-color: var(--color-schemes-color-scheme-1-text);

  /* Primary Dark */
  --button-primary-dark-background: var(--color-schemes-color-scheme-1-accent);
  --button-primary-dark-color: var(--color-schemes-color-scheme-1-text);
  --button-primary-dark-outline-color: var(--color-schemes-color-scheme-1-text-2);

  /* Secondary */
  --button-secondary-background: var(--color-schemes-color-scheme-1-background);
  --button-secondary-color: var(--color-schemes-color-scheme-1-text);
  --button-secondary-outline-background: none;
  --button-secondary-outline-color: var(--color-schemes-color-scheme-1-text-2);

  /* Secondary Dark */
  --button-secondary-dark-background: var(--color-schemes-color-scheme-1-background-2);
  --button-secondary-dark-color: var(--color-schemes-color-scheme-1-text-2);
  --button-secondary-dark-outline-color: var(--color-schemes-color-scheme-1-text);


  /** Spacing **/
  --spacing-sizing-container-container-large: 100%;
  --spacing-sizing-container-container-medium: 90%;
  --spacing-sizing-container-container-small: 80%;
  --spacing-sizing-max-width-max-width-xxlarge: 1280px;
  --spacing-sizing-max-width-max-width-xlarge: 1024px;
  --spacing-sizing-max-width-max-width-large: 768px;
  --spacing-sizing-max-width-max-width-medium: 560px;
  --spacing-sizing-max-width-max-width-small: 480px;
  --spacing-sizing-max-width-max-width-xsmall: 400px;
  --spacing-sizing-max-width-max-width-xxsmall: 320px;
  --spacing-sizing-page-padding-padding-global: 5%;
  --spacing-sizing-section-padding-padding-section-large: 10rem;
  --spacing-sizing-section-padding-padding-section-medium: 8rem;
  --spacing-sizing-section-padding-padding-section-small: 5rem;
}

/*

To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so:

<body data-typography-mode="desktop">
    <!-- the rest of your content -->
</body>

You can apply the theme on any DOM node, not just the `body`

*/

/* [data-typography-mode="desktop"] {
  --typography-text-sizes-heading-1: 56px;
  --typography-text-sizes-heading-2: 48px;
  --typography-text-sizes-heading-3: 40px;
  --typography-text-sizes-heading-4: 32px;
  --typography-text-sizes-heading-5: 24px;
  --typography-text-sizes-heading-6: 20px;
  --typography-text-sizes-text-large: 20px;
  --typography-text-sizes-text-medium: 18px;
}

[data-typography-mode="mobile"] {
  --typography-text-sizes-heading-1: 40px;
  --typography-text-sizes-heading-2: 36px;
  --typography-text-sizes-heading-3: 32px;
  --typography-text-sizes-heading-4: 24px;
  --typography-text-sizes-heading-5: 20px;
  --typography-text-sizes-heading-6: 18px;
  --typography-text-sizes-text-large: 18px;
  --typography-text-sizes-text-medium: 16px;
}

[data-spacing-sizing-mode="desktop"] {
  --spacing-sizing-page-padding-padding-global: 64px;
  --spacing-sizing-section-padding-padding-section-large: 112px;
  --spacing-sizing-section-padding-padding-section-medium: 80px;
  --spacing-sizing-section-padding-padding-section-small: 48px;
}

[data-spacing-sizing-mode="mobile"] {
  --spacing-sizing-page-padding-padding-global: 20px;
  --spacing-sizing-section-padding-padding-section-large: 64px;
  --spacing-sizing-section-padding-padding-section-medium: 48px;
  --spacing-sizing-section-padding-padding-section-small: 32px;
} */