:root {
  --brand-1: @brand-1;
  --brand-2: @brand-2;
  --brand-3: @brand-3;
  --black: @black;
  --white: @white;
  --gray-1: @gray-1;
  --gray-2: @gray-2;
  --gray-3: @gray-3;
  --gray-4: @gray-4;
  --gray-5: @gray-5;
  --gray-6: @gray-6;
  --gray-7: @gray-7;
  --gray-8: @gray-8;
  --light-1: @gray-6;
  --light-2: @gray-7;
  --highlight-1: var(--brand-1);
  --highlight-2: var(--brand-2);
  --link-color: var(--blue);
  --blue: @blue;
  --gray-dark: @gray-dark;
  --green: @green;
  --orange: @orange;
  --red: @red;
  --yellow: @yellow;
  --yellow-light: @yellow-light;
  --font-size-xs: @font-size-xs;
  --font-size-sm: @font-size-sm;
  --font-size-md: @font-size-md;
  --font-size-lg: @font-size-lg;
  --radius-sm: @border-radius-sm;
  --radius-md: @border-radius-md;
  --radius-lg: @border-radius-lg;
  --shadow-1: @shadow-1;
  --shadow-2: @shadow-2;
  --shadow-3: @shadow-3;
  --safe-top: 0px;
  --safe-bottom: 0px;
  --gutter: @gutter;
  --btn-primary-border-color: @btn-primary-border-color;
  --btn-primary-bg: @btn-primary-bg;
  --btn-primary-color: @btn-primary-color;
}

@supports (top: constant(safe-area-inset-top)) {
  :root {
    --safe-top: constant(safe-area-inset-top);
    --safe-bottom: constant(safe-area-inset-bottom);
  }
}

@supports (top: env(safe-area-inset-top)) {
  :root {
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
  }
}