:root {
    /* main hue colors */
    --color-hue-neutral: var(--us-color-hue-neutral, 228);
    --color-hue-primary: var(--us-color-hue-primary, 224);
    --color-hue-secondary: var(--us-color-hue-secondary, 270);
    --color-hue-success: var(--us-color-hue-success, 120);
    --color-hue-warning: var(--us-color-hue-warning, 40);
    --color-hue-danger: var(--us-color-hue-danger, 0);
  
    /* main colors */
    --color-neutral-0: var(--us-color-neutral-0, hsl(var(--color-hue-neutral), 0%, 100%));
    --color-neutral-100: var(--us-color-neutral-100, hsl(var(--color-hue-neutral), 25%, 98%));
    --color-neutral-200: var(--us-color-neutral-200, hsl(var(--color-hue-neutral), 33%, 97%));
    --color-neutral-300: var(--us-color-neutral-300, hsl(var(--color-hue-neutral), 11%, 91%));
    --color-neutral-600: var(--us-color-neutral-600, hsl(var(--color-hue-neutral), 7%, 70%));
    --color-neutral-700: var(--us-color-neutral-700, hsl(var(--color-hue-neutral), 3%, 44%));
    --color-neutral-800: var(--us-color-neutral-800, hsl(var(--color-hue-neutral), 5%, 37%));
    --color-neutral-900: var(--us-color-neutral-900, hsl(var(--color-hue-neutral), 6%, 28%));
    --color-neutral-1000: var(--us-color-neutral-1000, hsl(var(--color-hue-neutral), 16%, 8%));
  
    --color-primary-100: var(--us-color-primary-100, hsl(var(--color-hue-primary), 100%, 95%));
    --color-primary-200: var(--us-color-primary-200, hsl(var(--color-hue-primary), 100%, 88%));
    --color-primary-600: var(--us-color-primary-600, hsl(var(--color-hue-primary), 100%, 60%));
    --color-primary-800: var(--us-color-primary-800, hsl(var(--color-hue-primary), 78%, 46%));
    --color-primary-1000: var(--us-color-primary-1000, hsl(var(--color-hue-primary), 100%, 31%));
  
    --color-secondary-100: var(--us-color-secondary-100, hsl(var(--color-hue-secondary), 100%, 95%));
    --color-secondary-200: var(--us-color-secondary-200, hsl(var(--color-hue-secondary), 100%, 88%));
    --color-secondary-600: var(--us-color-secondary-600, hsl(var(--color-hue-secondary), 100%, 60%));
    --color-secondary-800: var(--us-color-secondary-800, hsl(var(--color-hue-secondary), 78%, 46%));
    --color-secondary-1000: var(--us-color-secondary-1000, hsl(var(--color-hue-secondary), 100%, 31%));
  
    --color-success-100: var(--us-color-success-100, hsl(var(--color-hue-success), 37%, 93%));
    --color-success-600: var(--us-color-success-600, hsl(var(--color-hue-success), 47%, 44%));
    --color-success-800: var(--us-color-success-800, hsl(var(--color-hue-success), 53%, 35%));
    --color-success-1000: var(--us-color-success-1000, hsl(var(--color-hue-success), 65%, 26%));
  
    --color-warning-100: var(--us-color-warning-100, hsl(var(--color-hue-warning), 100%, 93%));
    --color-warning-600: var(--us-color-warning-600, hsl(var(--color-hue-warning), 92%, 56%));
    --color-warning-800: var(--us-color-warning-800, hsl(var(--color-hue-warning), 83%, 44%));
    --color-warning-1000: var(--us-color-warning-1000, hsl(var(--color-hue-warning), 73%, 29%));
    
    --color-danger-100: var(--us-color-danger-100, hsl(var(--color-hue-danger), 80%, 96%));
    --color-danger-600: var(--us-color-danger-600, hsl(var(--color-hue-danger), 70%, 60%));
    --color-danger-800: var(--us-color-danger-800, hsl(var(--color-hue-danger), 59%, 50%));
    --color-danger-1000: var(--us-color-danger-1000, hsl(var(--color-hue-danger), 65%, 35%));
  
    /* text + icon colors */
    --color-text-1000: var(--us-color-text-1000, var(--color-neutral-1000));
    --color-text-900: var(--us-color-text-900, var(--color-neutral-900));
    --color-text-700: var(--us-color-text-700, var(--color-neutral-700));
    --color-text-600: var(--us-color-text-600, var(--color-neutral-600));
    --color-text-300: var(--us-color-text-300, var(--color-neutral-300));
    --color-text-0: var(--us-color-text-0, var(--color-neutral-0));
  
    /* social colors */
    --color-whatsapp: var(--us-color-whatsapp, #65D072);
    --color-whatsapp-light: var(--us-color-whatsapp-light, #E6F7E6);
    --color-viber: var(--us-color-viber, #745398);
    --color-viber-light: var(--us-color-viber-light, #E9E3EE);
    --color-email: var(--us-color-email, #006EC4);
    --color-email-light: var(--us-color-email, #D6E8F5);
  
    /* graph colors */
    --color-graph-magenta: var(--us-color-graph-magenta,  var(--color-graph-1));
    --color-graph-turquioise: var(--us-color-graph-turquioise, var(--color-graph-2));
    --color-graph-yellow: var(--us-color-graph-yellow, var(--color-graph-3));
    --color-graph-blue: var(--us-color-graph-blue, var(--color-graph-4));
    --color-graph-purple: var(--us-color-graph-purple, var(--color-graph-5));
  
    --color-graph-1: var(--us-color-graph-1, #FF00FF);
    --color-graph-2: var(--us-color-graph-2, #40E0D0);
    --color-graph-3: var(--us-color-graph-3, #FFFF00);
    --color-graph-4: var(--us-color-graph-4, #003366);
    --color-graph-5: var(--us-color-graph-5, #761AD1);
  
    /* gradient colors */
    --color-gradient-graph: var(--us-color-gradient-graph, linear-gradient(180.46deg, #F7EDFF -19.54%, rgba(255, 255, 255, 0) 99.6%));
    --color-gradient-mask-top: var(--us-color-gradient-mask-top, linear-gradient(180deg, var(--color-neutral-0) 0%, rgba(255, 255, 255, 0) 100%));
    --color-gradient-mask-bottom: var(--us-color-gradient-mask-bottom, linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--color-neutral-0) 100%));
  
    /* overlay */
    --color-overlay: var(--us-color-overlay, rgba(18, 19, 25, .24));
  
    /* box-shadow */
    --box-shadow-100: var(--us-box-shadow-100, 0px 0px 2px rgba(18, 19, 25, 0.12));
    --box-shadow-200: var(--us-box-shadow-200, 0px 0px 8px rgba(18, 19, 25, 0.12));
    --box-shadow-300: var(--us-box-shadow-300, 0px 0px 12px rgba(18, 19, 25, 0.16));
    --box-shadow-input-focus: var(--us-box-shadow-input-focus, inset 0 2px 4px 0 rgba(51, 105, 255, 0.16));
    --box-shadow-input-error: var(--us-box-shadow-input-error, inset 0 2px 4px 0 rgba(224, 82, 82, 0.16));
  
  
    /* inner spaces */
    --space-inner-xs: var(--us-space-inner-xs, 4px);
    --space-inner-s: var(--us-space-inner-s, 6px);
    --space-inner-m: var(--us-space-inner-m, 8px);
    --space-inner-l: var(--us-space-inner-l, 12px);
    --space-inner-xl: var(--us-space-inner-xl, 16px);
  
    /* outer spaces */
    --space-outer-xs: var(--us-space-outer-xs, 16px);
    --space-outer-s: var(--us-space-outer-s, 24px);
    --space-outer-m: var(--us-space-outer-m, 40px);
    --space-outer-l: var(--us-space-outer-l, 64px);
    --space-outer-xl: var(--us-space-outer-xl, 80px);
  
    /* inline spaces */
    --space-inline-xs: var(--us-space-inline-xs, 2px);
    --space-inline-s: var(--us-space-inline-s, 4px);
    --space-inline-m: var(--us-space-inline-m, 8px);
    --space-inline-l: var(--us-space-inline-l, 12px);
    --space-inline-xl: var(--us-space-inline-xl, 16px);
  
    /* sizes */
    --size-3xs: var(--us-size-3xs, 2px);
    --size-2xs: var(--us-size-2xs, 4px);
    --size-xs: var(--us-size-xs, 8px);
    --size-s: var(--us-size-s, 12px);
    --size-m: var(--us-size-m, 16px);
    --size-l: var(--us-size-l, 24px);
    --size-xl: var(--us-size-xl, 32px);
    --size-2xl: var(--us-size-2xl, 36px);
    --size-3xl: var(--us-size-3xl, 40px);
    --size-4xl: var(--us-size-4xl, 48px);
    --size-5xl: var(--us-size-5xl, 56px);
    --size-6xl: var(--us-size-6xl, 80px);
    /* border radiuses */
    --border-radius-m: var(--us-border-radius-m, 4px);
    --border-radius-l: var(--us-border-radius-l, 8px);
  
    /* breaks */
    --break-xs: var(--us-break-xs, 376px);
    --break-sm: var(--us-break-sm, 520px);
    --break-md: var(--us-break-md, 720px);
    --break-lg: var(--us-break-lg, 960px);
  
    /* typography */
    --font-family: var(--us-font-family, 'Work Sans');
    /* headline */
    --text-headline-h1: var(--us-text-headline-h1, 700 40px/56px var(--font-family));
    --text-headline-h2: var(--us-text-headline-h2, 600 32px/44px var(--font-family));
    --text-headline-h3: var(--us-text-headline-h3, 600 24px/32px var(--font-family));
    --text-headline-h4: var(--us-text-headline-h4, 600 18px/26px var(--font-family));
    --text-headline-h5: var(--us-text-headline-h5, 600 16px/24px var(--font-family));
    /* paragraph */
    --text-p-xl: var(--us-text-p-xl, 400 18px/26px var(--font-family));
    --text-p-l: var(--us-text-p-l, 400 16px/24px var(--font-family));
    --text-p-m-light: var(--us-text-p-m-light, 400 14px/20px var(--font-family));
    --text-p-m-heavy: var(--us-text-p-m-heavy, 600 14px/20px var(--font-family));
    --text-p-s-light: var(--us-text-p-s-light, 400 12px/16px var(--font-family));
    --text-p-s-heavy: var(--us-text-p-s-heavy, 600 12px/16px var(--font-family));
    --text-p-xs-light: var(--us-text-p-xs-light, 400 10px/14px var(--font-family));
    --text-p-xs-heavy: var(--us-text-p-xs-heavy, 500 10px/14px var(--font-family));
    /* links */
    --text-link-l: var(--us-text-links-l, 400 16px/24px var(--font-family));
    --text-link-m: var(--us-text-links-m, 400 14px/20px var(--font-family));
    --text-link-s: var(--us-text-links-s, 400 12px/16px var(--font-family));
    /* button */
    --text-button-l: var(--us-text-button-l, 500 16px/24px var(--font-family));
    --text-button-m: var(--us-text-button-m, 500 14px/16px var(--font-family));
    --text-button-s: var(--us-text-button-s, 500 12px/16px var(--font-family));
    /* labels */
    --text-label-l: var(--us-text-label-l, 500 16px/24px var(--font-family));
    --text-label-m: var(--us-text-label-m, 500 14px/20px var(--font-family));
    --text-label-s: var(--us-text-label-s, 500 12px/16px var(--font-family));
  
    /* additional */
    --widget-container-radius: var(--us-widget-container-radius, var(--border-radius-l));
    --widget-container-boxshadow: var(--us-widget-container-boxshadow, none);
    --widget-container-border: var(--us-widget-container-border, 1px solid var(--color-neutral-300));
  }