:host {
  /* 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));
}