:root {
  /* Font defaults */
  --font-base-size: 16px;
  --font-base-line-height: 1.75;
  --font-main: 'Albert Sans', sans-serif;
  --font-secondary: 'DM Sans', sans-serif;
  --font-button: 'Albert Sans', sans-serif;

  /* Margins and Paddings */
  --js-unit: calc(16px * 0.75);
  --js-margin: calc(-1 * var(--js-unit));
  --js-padding: var(--js-unit);

  /* Buttons */
  --button-font-size-desktop: 20px;
  --button-font-size-mobile: 16px;
  --button-padding-v: 16px;
  --button-padding-h: 28px;

  /* Header */
  --header-height-desktop: 80px;
  --header-height-mobile: 60px;
  --header-toogle-icon-width-desktop: 30px;
  --header-toogle-icon-height-desktop: 22px;
  --header-toogle-icon-width-mobile: 24px;
  --header-toogle-icon-height-mobile: 18px;

  /* Main colors */
  --js-color-white: #FCFAF9;
  --js-color-white-rgb: 252, 250, 249;
  --js-color-black: #0B0B09;
  --js-color-black-rgb: 11, 11, 9;
  --js-color-grey: #20221B;
  --js-color-grey-rgb: 32, 34, 27;
  --js-color-green: #9FCC2E;
  --js-color-green-rgb: 159, 204, 46;
  --js-color-green-dark: #82A626;
  --js-color-green-dark-rgba: 130, 166, 38;
  --js-color-green-bright: #B5D959;
  --js-color-green-bright-rgba: 181, 217, 89;
  --js-color-green-tint: rgba(var(--js-color-green-rgb), 0.14);
  --js-color-green-glow: rgba(var(--js-color-green-rgb), 0.3);

  /* Complementary colors */
  --js-color-purple-dark: #2A0C4E;
  --js-color-purple-dark-rgb: 42, 12, 78;
  --js-color-purple-light: #541388;
  --js-color-purple-light-rgb: 84, 19, 136;
  --js-color-blue-dark: #10377F;
  --js-color-blue-dark-rgb: 16, 55, 127;
  --js-color-blue-light: #1446A0;
  --js-color-blue-light-rgb: 20, 70, 160;
  --js-color-teal-dark: #138783;
  --js-color-teal-dark-rgb: 19, 135, 131;
  --js-color-teal-light: #19B3AD;
  --js-color-teal-light-rgb: 25, 179, 173;

  /* Gradients */
  --js-gradient-purple: linear-gradient(0deg, var(--js-color-purple-light) 0%, var(--js-color-purple-dark) 100%);
  --js-gradient-purple-reversed: linear-gradient(0deg, var(--js-color-purple-dark) 0%, var(--js-color-purple-light) 100%);
  --js-gradient-purple-fallback: var(--js-color-purple-dark);
  --js-gradient-blue: linear-gradient(0deg, var(--js-color-blue-light) 0%, var(--js-color-blue-dark) 100%);
  --js-gradient-blue-reversed: linear-gradient(0deg, var(--js-color-blue-dark) 0%, var(--js-color-blue-light) 100%);
  --js-gradient-blue-fallback: var(--js-color-blue-dark);
  --js-gradient-teal: linear-gradient(0deg, var(--js-color-teal-light) 0%, var(--js-color-teal-dark) 100%);
  --js-gradient-teal-reversed: linear-gradient(0deg, var(--js-color-teal-dark) 0%, var(--js-color-teal-light) 100%);
  --js-gradient-teal-fallback: var(--js-color-teal-dark);

  /* Others */
  --js-min-height: 24px;
  --js-radius-xl: 16px;
  --js-radius-lg: 12px;
  --js-radius-md: 8px;
  --js-radius-sm: 4px;
  --js-transition: all 0.25s ease-in-out;
}

[data-bundle-color="default"] {
  --color-background: var(--js-color-black);
  --color-background-op1: rgba(var(--js-color-black-rgb), 0.1);
  --color-background-op2: rgba(var(--js-color-black-rgb), 0.2);
  --color-background-op3: rgba(var(--js-color-black-rgb), 0.3);
  --color-background-op4: rgba(var(--js-color-black-rgb), 0.4);
  --color-background-op5: rgba(var(--js-color-black-rgb), 0.5);
  --color-background-op6: rgba(var(--js-color-black-rgb), 0.6);
  --color-background-op7: rgba(var(--js-color-black-rgb), 0.7);
  --color-background-op8: rgba(var(--js-color-black-rgb), 0.8);
  --color-background-op9: rgba(var(--js-color-black-rgb), 0.9);
  --color-main: var(--js-color-white);
  --color-main-op05: rgba(var(--js-color-white-rgb), 0.05);
  --color-main-op1: rgba(var(--js-color-white-rgb), 0.1);
  --color-main-op2: rgba(var(--js-color-white-rgb), 0.2);
  --color-main-op3: rgba(var(--js-color-white-rgb), 0.3);
  --color-main-op4: rgba(var(--js-color-white-rgb), 0.4);
  --color-main-op5: rgba(var(--js-color-white-rgb), 0.5);
  --color-main-op6: rgba(var(--js-color-white-rgb), 0.6);
  --color-main-op7: rgba(var(--js-color-white-rgb), 0.7);
  --color-main-op8: rgba(var(--js-color-white-rgb), 0.8);
  --color-main-op9: rgba(var(--js-color-white-rgb), 0.9);
  --color-secondary: var(--js-color-white);
  --color-secondary-op7: rgba(var(--js-color-white-rgb), 0.7);
  --color-border: rgba(var(--js-color-white-rgb), 0.1);
  --color-accent: var(--js-color-green);
  --color-accent-contrast: var(--js-color-white);
  --color-button-main-bg: var(--js-color-green);
  --color-button-main-bg-hover: var(--js-color-green-bright);
  --color-button-main-text: var(--js-color-black);
  --color-button-main-text-hover: var(--js-color-black);
  --color-button-secondary-bg: var(--js-color-white);
  --color-button-secondary-bg-hover: var(--js-color-white);
  --color-button-secondary-text: var(--js-color-black);
  --color-button-secondary-text-hover: var(--js-color-grey);

  color: var(--color-secondary);
}

[data-bundle-color="light"] {
  --color-background: var(--js-color-white);
  --color-background-op1: rgba(var(--js-color-white-rgb), 0.1);
  --color-background-op2: rgba(var(--js-color-white-rgb), 0.2);
  --color-background-op3: rgba(var(--js-color-white-rgb), 0.3);
  --color-background-op4: rgba(var(--js-color-white-rgb), 0.4);
  --color-background-op5: rgba(var(--js-color-white-rgb), 0.5);
  --color-background-op6: rgba(var(--js-color-white-rgb), 0.6);
  --color-background-op7: rgba(var(--js-color-white-rgb), 0.7);
  --color-background-op8: rgba(var(--js-color-white-rgb), 0.8);
  --color-background-op9: rgba(var(--js-color-white-rgb), 0.9);
  --color-main: var(--js-color-black);
  --color-main-op05: rgba(var(--js-color-black-rgb), 0.05);
  --color-main-op1: rgba(var(--js-color-black-rgb), 0.1);
  --color-main-op2: rgba(var(--js-color-black-rgb), 0.2);
  --color-main-op3: rgba(var(--js-color-black-rgb), 0.3);
  --color-main-op4: rgba(var(--js-color-black-rgb), 0.4);
  --color-main-op5: rgba(var(--js-color-black-rgb), 0.5);
  --color-main-op6: rgba(var(--js-color-black-rgb), 0.6);
  --color-main-op7: rgba(var(--js-color-black-rgb), 0.7);
  --color-main-op8: rgba(var(--js-color-black-rgb), 0.8);
  --color-main-op9: rgba(var(--js-color-black-rgb), 0.9);
  --color-secondary: var(--js-color-grey);
  --color-secondary-op7: rgba(var(--js-color-grey-rgb), 0.7);
  --color-border: rgba(var(--js-color-black-rgb), 0.1);
  --color-accent: var(--js-color-green);
  --color-accent-contrast: var(--js-color-black);
  --color-button-main-bg: var(--js-color-green);
  --color-button-main-bg-hover: var(--js-color-green-bright);
  --color-button-main-text: var(--js-color-black);
  --color-button-main-text-hover: var(--js-color-black);
  --color-button-secondary-bg: var(--js-color-black);
  --color-button-secondary-bg-hover: var(--js-color-grey);
  --color-button-secondary-text: var(--js-color-white);
  --color-button-secondary-text-hover: var(--js-color-white);

  color: var(--color-secondary);
}