:root{
  /* Spacing */
  --space-base: 16px;
  --space-xxs: calc(var(--space-base)* 0.25);
  --space-xs: calc(var(--space-base)* 0.5);
  --space-sm: calc(var(--space-base)* 0.75);
  --space-md: calc(var(--space-base)* 1.5);
  --space-lg: calc(var(--space-base)* 2);
  --space-xl: calc(var(--space-base)* 2.5);
  --space-xxl: calc(var(--space-base)* 4);
  --space-xxxl: calc(var(--space-base)* 5);
  --section-space: calc(var(--space-base)* 7.5);
  --section-side-space: var(--space-xxl);
  --gutter: var(--space-xxl);
  --gutter-sm: var(--space-lg);
  --container-max: 1200px;
  
  /* Fonts */
  --text-base: 16px;
  --text-sm: calc(var(--text-base)* 0.875);
  --text-lg: calc(var(--text-base)* 1.125);
  --heading-xxs: calc(var(--text-base)* 0.875);
  --heading-xs: calc(var(--text-base)* 1);
  --heading-sm: calc(var(--text-base)* 1.25);
  --heading-md: calc(var(--text-base)* 1.5);
  --heading-lg: calc(var(--text-base)* 2);
  --heading-xl: calc(var(--text-base)* 2.5);
  --heading-xxl: calc(var(--text-base)* 3);
  --heading-xxxl: calc(var(--text-base)* 3.5);
  --font-weight-regular: 400;
  --font-weight-bold: 600;
  --line-height-body:1.5;
  --line-height-heading:1.25;
  --font-family-heading: "Inter", sans-serif;
  --font-family-body: "Inter", sans-serif;
  
  /* Colors */
  --color-brand-01: #006EF9;
  --color-text-black: #0E1620;
  --color-text-white: #FFFFFF;
  --color-text-grey: #4F4F4F;
  --color-text-blue: var(--brand-01);
  --color-ui-01: #F4F4F4;
  --color-ui-02: #D3D3D3;
  --color-ui-03: #646464;
  --color-ui-white: #FFFFFF;
  
  /* Border Radius */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 24px;
  --border-radius-button: 100%;
  --border-radius-element: var(--border-radius-lg);
  
}
@media(max-width: 991px){
  /*Mobile Styles*/
  :root{
  --heading-xxs: calc(var(--text-base)* 0.875);
  --heading-xs: calc(var(--text-base)* 1);
  --heading-sm: calc(var(--text-base)* 1.125);
  --heading-md: calc(var(--text-base)* 1.25);
  --heading-lg: calc(var(--text-base)* 1.5);
  --heading-xl: calc(var(--text-base)* 2);
  --heading-xxl: calc(var(--text-base)* 2.5);
  --heading-xxxl: calc(var(--text-base)* 2.5);
  --section-space: calc(var(--text-base)* 3.75);
  --section-side-space: var(--space-base);
  --gutter: var(--space-lg);
  --gutter-sm: var(--space-md);
}
}