pkg-components/assets/styles/tokens.css

:root {
  --color-base-black: #282828;
  --color-base-white: #FFFFFF;
  --color-base-transparent: transparent;

  --color-loaders-background: #f3f3f3;
  --color-loaders-fore-ground: #ecebeb;

  --color-primary-red: #ff0000;
  --color-primary-red2: #C00000;
  --color-primary-red-dark: #A21B11;
  --color-primary-red-header: linear-gradient(180deg, #DA291C 0%, #C00000 96.15%);
  --color-primary-red-qty-button: linear-gradient(180deg, #DA291C 0%, #C00000 44.44%);
  --color-primary-red-bg: #FFF4F4;
  --color-primary-disabled: #c4c4c4;
  --color-primary-pink-light: #FFC2C2;
  --color-primary-red-darker: #5C0F0A;

  --color-secondary-blue: #00819F;
  --color-secondary-blue2: #006C85;
  --color-secondary-blue-dark: #00586C;
  --color-secondary-blue-bg: #E4F7FC;

  --color-neutral-black: #282828;
  --color-neutral-gray: #E5E5E5;
  --color-neutral-gray-light: #F5F5F5;
  --color-neutral-gray-dark: #666666;
  --color-neutral-gray-silver: #C4C4C4;
  --color-neutral-gray-white: #F9F9F9;
  --color-neutral-white: #FFFFFF;

  --color-campaigns-red: #da291c;
  --color-campaigns-black: #212322;
  --color-campaigns-blue: #006c85;
  --color-campaigns-orange: #e07c00;
  --color-campaigns-yellow: #FEDD00;
  --color-campaigns-turquoise: #63BBAE;

  --color-feedback-success-light: #50a773;
  --color-feedback-success-dark: #50a773;
  --color-feedback-error-light: #F80000;
  --color-feedback-error-dark: #EE0000;
  --color-feedback-warning-light: #F0A92E;
  --color-feedback-warning-dark: #CC870F;

  --color-text-primary: #da291c;
  --color-text-secondary: #00819f;
  --color-text-gray-light: #666666;
  --color-text-inactive: #C4C4C4;
  --color-text-black: #282828;
  --color-text-white: #FFFFFF;
  --color-text-success: #50a773;
  --color-text-error: #EE0000;
  --color-text-warning: #CC870F;

  --color-background-primary: #da291c;
  --color-background-primary-light: #FFF4F4;
  --color-background-secondary: #00819F;
  --color-background-secondary-light: #E4F7FC;
  --color-background-gray: #E5E5E5;
  --color-background-gray-light: #f5f5f5;
  --color-background-white: #FFFFFF;
  --color-background-pink: #ec938d;

  --color-icons-primary: #ff0000;
  --color-icons-secondary: #00819F;
  --color-icons-gray: #666666;
  --color-icons-gray-light: #C4C4C4;
  --color-icons-black: #282828;
  --color-icons-white: #FFFFFF;
  --color-icons-success: #24ba00;
  --color-icons-error: #F80000;
  --color-icons-warning: #F0A92E;

  --color-alvi-base-black: #282828;
  --color-alvi-base-white: #FFFFFF;
  --color-alvi-base-transparent: transparent;

  --color-alvi-loaders-background: #f3f3f3;
  --color-alvi-loaders-fore-ground: #ecebeb;

  --color-alvi-primary-blue: #02498E;
  --color-alvi-primary-blue2: #04377A;
  --color-alvi-primary-blue3: #00285C;
  --color-alvi-primary-background-blue: #DEEAFA;
  --color-alvi-primary-blue-gradient: linear-gradient(180deg, #02498E 0%, #00285C 96.15%);
  --color-alvi-primary-yellow-gradient-button: linear-gradient(180deg, #FFE59C 0%, #EEC656 100%);

  --color-alvi-secondary-yellow: #FDC42D;
  --color-alvi-secondary-yellow2: #F6B812;
  --color-alvi-secondary-yellow3: #E1AE27;
  --color-alvi-secondary-yellow4: #FFE59C;

  --color-alvi-neutral-black: #333333;
  --color-alvi-neutral-gray: #E5E5E5;
  --color-alvi-neutral-gray-light: #F5F5F5;
  --color-alvi-neutral-gray-dark: #666666;
  --color-alvi-neutral-gray-silver: #C4C4C4;
  --color-alvi-neutral-gray-white: #F9F9F9;
  --color-alvi-neutral-white: #FFFFFF;

  --color-alvi-campaigns-super-marca: #DA291C;
  --color-alvi-campaigns-super-precio: #02498E;
  --color-alvi-campaigns-exclusivo: #FEDD00;

  --color-alvi-feedback-success-dark: #50a773;
  --color-alvi-feedback-error-dark: #E43C3C;
  --color-alvi-feedback-warning-light: #F0A92E;
  --color-alvi-feedback-warning-dark: #CC870F;

  --color-alvi-text-primary: #02498E;
  --color-alvi-text-secondary: #FDC42D;
  --color-alvi-text-gray-light: #666666;
  --color-alvi-text-inactive: #C4C4C4;
  --color-alvi-text-success: #50a773;
  --color-alvi-text-error: #E43C3C;
  --color-alvi-text-warning: #CC870F;

  --color-alvi-background-selago: #DEEAFA;
  --color-alvi-background-foam: #E4F7FC;
  --color-alvi-background-wild-sand: #F5F5F5;
  --color-alvi-background-spanish-gray: #999999;
  --color-alvi-background-mercury: #E5E5E5;
  --color-alvi-background-white: #FFFFFF;
  --color-alvi-background-yellow: #FDC42D;
  --color-alvi-background-blue: #02498E;

  --color-alvi-icons-primary: #02498E;
  --color-alvi-icons-secondary: #FDC42D;
  --color-alvi-icons-gray: #666666;
  --color-alvi-icons-gray-light: #C4C4C4;
  --color-alvi-icons-black: #333333;
  --color-alvi-icons-white: #FFFFFF;
  --color-alvi-icons-success: #24ba00;
  --color-alvi-icons-error: #F80000;
  --color-alvi-icons-warning: #F0A92E;

  --font-family-sans: Open Sans;

  --font-size-base: 16px;
  --font-size-xs: 0.688rem;
  --font-size-2xs: 0.625rem;
  --font-size-sm: 0.75rem;
  --font-size-md: 0.875rem;
  --font-size-lg: 1rem;
  --font-size-xl: 1.125rem;
  --font-size-2xl: 1.25rem;
  --font-size-3xl: 1.5rem;
  --font-size-5xl: 1.875rem;
  --font-size-6xl: 3rem;
  --font-size-9xl: 5.862rem;
  --font-size-10xl: 12.5rem;

  --spacing-none: 0;
  --spacing-xs: 0.125rem;
  --spacing-sm: 0.25rem;
  --spacing-md: 0.5rem;
  --spacing-lg: 0.75rem;
  --spacing-xl: 1rem;
  --spacing-2xl: 1.5rem;
  --spacing-3xl: 2rem;
  --spacing-4xl: 3rem;
  --spacing-5xl: 3.5rem;

  --font-size-titles-base: 16px;
  --font-size-titles-2xs: 0.875rem;
  --font-size-titles-3xs: 0.75rem;
  --font-size-titles-xs: 1rem;
  --font-size-titles-sm: 1.125rem;
  --font-size-titles-md: 1.25rem;
  --font-size-titles-md2: 1.375rem;
  --font-size-titles-lg: 1.5rem;
  --font-size-titles-xl: 1.75rem;
  --font-size-titles-2xl: 1.875rem;

  --font-weight-none: 0;
  --font-weight-hairline: 100;
  --font-weight-thin: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  --line-height-none: 0.063rem;
  --line-height-xs: 0.936em;
  --line-height-2xs: 0.625rem;
  --line-height-sm: 1.021rem;
  --line-height-md: 1.192rem;
  --line-height-lg: 1.362rem;
  --line-height-xl: 1.532rem;
  --line-height-2xl: 1.703rem;
  --line-height-3xl: 2.043rem;
  --line-height-4xl: 2.383rem;
  --line-height-5xl: 2.553rem;
  --line-height-6xl: 4.086rem;
  --line-height-9xl: 8rem;
  --line-height-10xl: 17.05rem;

  --letter-spacing-tightest: -.075rem;
  --letter-spacing-tighter: -.05rem;
  --letter-spacing-tight: -.025rem;
  --letter-spacing-normal: 0;
  --letter-spacing-wider: .05rem;
  --letter-spacing-widest: .25rem;

  --box-shadow-none: none;
  --box-shadow-xs: 4px -6px 18px rgba(0, 0, 0, 0.05);
  --box-shadow-2xs: 0px 4px 8px rgba(27, 33, 56, 0.06);
  --box-shadow-sm: 4px 4px 18px rgba(0, 0, 0, 0.12);
  --box-shadow-md: 0px 16px 24px rgba(0, 0, 0, 0.14), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 8px 10px rgba(0, 0, 0, 0.2);
  --box-shadow-lg: -1px 7px 18px -2px rgba(0, 0, 0, 0.12);
  --box-shadow-xl: 0px 4px 8px rgba(27, 33, 56, 0.06);

  --filter-none: none;
  --filter-xs: drop-shadow(20px 20px 80px #1b21380d);

  --border-radius-none: 0;
  --border-radius-2xs: 0.25rem;
  --border-radius-xs: 0.375rem;
  --border-radius-sm: 0.625rem;
  --border-radius-md: 0.75rem;
  --border-radius-lg: 1.25rem;
  --border-radius-full: 624.938rem;

  --border-width-none: 0;
  --border-width-xs: 0.063rem;
  --border-width-md: 0.094rem;
  --border-width-lg: 0.125rem;
  --border-width-xl: 0.188rem;

  --opacity-0: 0;
  --opacity-25: 0.25;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-75: 0.75;
  --opacity-100: 1;

  --width-max-desktop: 1366px;
  --width-max-mobile: 960px;

  --z-index-0: 0;
  --z-index-5: 5;
  --z-index-10: 10;
  --z-index-20: 20;
  --z-index-30: 30;
  --z-index-40: 40;
  --z-index-50: 50;
  --z-index-999: 999;
  --z-index-9999: 9999;
  --z-index-99999: 99999;
  --z-index-auto: auto;
  --z-index--2: -2;
  --z-index--1: -1;
}