/*--------------------------------------------------------------
1.0 VARIABLES
--------------------------------------------------------------*/

:root {
  --ui-color-brand: #353535;

  --ui-color-n-000: #fff;
  --ui-color-n-050: #f5f5f5;
  --ui-color-n-100: #ebebeb;
  --ui-color-n-300: #aeaeae;
  --ui-color-n-500: #353535;
  --ui-color-n-700: #282828;
  --ui-color-n-900: #1a1a1a;

  --ui-color-background-primary  : var(--ui-color-n-000);
  --ui-color-background-secondary: var(--ui-color-n-050);
  --ui-color-background-tertiary : var(--ui-color-n-100);

  --ui-color-border: var(--ui-color-n-300);

  --ui-color-typography-heading: var(--ui-color-n-500);
  --ui-color-typography-body   : var(--ui-color-n-900);
  --ui-color-typography-note   : var(--ui-color-n-300);
  --ui-color-typography-button : var(--ui-color-n-000);

  /*------------------------------------------------------------
  | 1.2 TYPOGRAPHY
  ------------------------------------------------------------*/
  --ui-typography-typeface: "Inter", sans-serif;

  --ui-typography-h1: 1.9375rem;
  --ui-typography-h2: 1.5625rem;
  --ui-typography-h3: 1.25rem;
  --ui-typography-p : 1rem;
  --ui-typography-s : .8125rem;

  --ui-typography-h1-leading: 1.2;
  --ui-typography-h2-leading: 1.2;
  --ui-typography-p-leading : 1.5;

  --ui-typography-margin-heading: .75rem;
  --ui-typography-margin-body   : 1.125rem;

  /*------------------------------------------------------------
  | 1.3 LAYOUT
  ------------------------------------------------------------*/
  --ui-layout-container: 1.25rem;
  --ui-layout-grid     : 3.625rem;
  --ui-layout-gutter   : 1rem;

  --ui-gap-header     : 1rem;
  --ui-gap-cta        : .75rem;
  --ui-gap-hero       : 2rem;
  --ui-gap-customer   : 2rem;
  --ui-gap-feature    : 2rem;
  --ui-gap-card       : 1.25rem;
  --ui-gap-pricing    : 2rem;
  --ui-gap-testimonial: 3rem;

  --ui-radius-avatar: 5rem;
  --ui-radius-button: 5rem;
  --ui-radius-card  : .5rem;

}