$love: #ee276c;
$biz: #0d4d8d;
$friends: #08aebf;
$pay: #faa31b;
$text: #1f2327;
$back: #f8f9f9;

$gray-50: #ffffff;
$gray-75: #e9e9e9;
$gray-100: #bcbdbe;
$gray-200: #8f9193;
$gray-300: #626568;
$gray-400: #35393d;
$gray-500: #1f2327;
$gray-600: #1c2023;
$gray-700: #16191b;
$gray-800: #101214;
$gray-900: #090a0c;

$pink-75: #fde9f0;
$pink-100: #fabed3;
$pink-200: #f793b6;
$pink-300: #f36898;
$pink-400: #f03d7b;
$pink-500: #ee276c;
$pink-600: #d62361;
$pink-700: #a71b4c;
$pink-800: #771436;
$pink-900: #470c20;

$red-75: #fdeaee;
$red-100: #fac1cc;
$red-200: #f798aa;
$red-300: #f46e87;
$red-400: #f14565;
$red-500: #ef3054;
$red-600: #d72b4c;
$red-700: #a7223b;
$red-800: #78182a;
$red-900: #480e19;

$green-75: #ebf9ee;
$green-100: #c2eecd;
$green-200: #9ae3ac;
$green-300: #71d88b;
$green-400: #48cd6a;
$green-500: #34c759;
$green-600: #2fb350;
$green-700: #248b3e;
$green-800: #1a642d;
$green-900: #103c1b;

$yellow-75: #fff6e9;
$yellow-100: #ffe3bd;
$yellow-200: #ffd092;
$yellow-300: #ffbd66;
$yellow-400: #ffaa3a;
$yellow-500: #ffa124;
$yellow-600: #e69120;
$yellow-700: #b37119;
$yellow-800: #805112;
$yellow-900: #4c300b;

$blue-75: #e6f6ff;
$blue-100: #b3e3ff;
$blue-200: #80d1ff;
$blue-300: #4dbfff;
$blue-400: #1aacff;
$blue-500: #00a3ff;
$blue-600: #0093e6;
$blue-700: #0072b3;
$blue-800: #005280;
$blue-900: #00314c;

$purple-75: #f2f2fb;
$purple-100: #d9d8f2;
$purple-200: #c0bfea;
$purple-300: #a7a5e2;
$purple-400: #8e8bd9;
$purple-500: #817ed5;
$purple-600: #7471c0;
$purple-700: #5a5895;
$purple-800: #413f6b;
$purple-900: #272640;

// fs means font-size, 1000 the token
$fs1000: 48px;
$fs900: 42px;
$fs800: 36px;
$fs700: 32px;
$fs600: 28px;
$fs500: 24px;
$fs400: 20px;
$fs300: 18px;
$fs200: 16px;
$fs100: 14px;
$fs75: 12px;
$fs50: 10px;

// lh means line-height, 1000 the token
$lh1000: 62px;
$lh900: 54px;
$lh800: 46px;
$lh700: 42px;
$lh600: 36px;
$lh500: 32px;
$lh400: 26px;
$lh300: 24px;
$lh200: 20px;
$lh100: 18px;
$lh75: 16px;
$lh50: 14px;

$background-color: $gray-50;
$title-primary: $gray-400;
$title-secondary: $gray-300;
$description-primary: $gray-300;
$description-secondary: $gray-200;
$border: $gray-75;
$placeholder: $gray-200;
$modal-popup: $gray-50;
$disable-primary: $gray-100;
$card-primary: $gray-100;
$card-secondary: $gray-75;
$others: $gray-200;

:global(body[mode="dark"]) {
  $background-color: $gray-900;
  $title-primary: $gray-75;
  $title-secondary: $gray-75;
  $description-primary: $gray-100;
  $description-secondary: $gray-100;
  $border: $gray-500;
  $placeholder: $gray-200;
  $modal-popup: $gray-800;
  $disable-primary: $gray-300;
  $card-primary: $gray-400;
  $card-secondary: $gray-500;
  $others: $gray-200;
}

@mixin dark {
  :global(body[mode="dark"]) {
    @content;
  }
}