@use '../abstract' as *;
:root {
  /** Primary **/
  --color-primary-hue: 343;
  --color-primary-100: var(--color-primary-hue) 87% 56%;            /* #f02e65 */
  --color-primary-200: calc(var(--color-primary-hue) - 3) 79% 48%;  /* #DA1A5B */
  --color-primary-300: calc(var(--color-primary-hue) - 6) 87% 40%;  /* #c00D53 */

  /** Neutral **/

  --color-neutral-0:   0 0% 100%;    /* #ffffff */
  --color-neutral-5:   240 11% 98%;  /* #FAFAFB */
  --color-neutral-10:  240 9% 94%;   /* #EDEDF0 */
  --color-neutral-15:  240 4% 85%;   /* #D8D8DB */
  --color-neutral-20:  240 3% 77%;   /* #C3C3C6 */

  --color-neutral-50:  240 2% 52%;   /* #818186 */
  --color-neutral-60:  240 2% 43%;   /* #6C6C71 */
  --color-neutral-70:  240 3% 35%;   /* #56565C */

  --color-neutral-80:  240 4% 27%;   /* #414146 */
  --color-neutral-85:  240 4% 18%;   /* #2D2D31 */
  --color-neutral-90:  240 7% 12%;   /* #1D1D21 */
  --color-neutral-100: 240 6% 10%;   /* #19191C */
  --color-neutral-105: 240 5% 8%;    /* #141416 */
  --color-neutral-1000:0 0% 0%;      /* #000000 */

  /** Information **/
  --color-information-hue: 189;
  --color-information-10: calc(var(--color-information-hue) + 4) 88% 94%;   /* #E1F7FD */
  --color-information-50: calc(var(--color-information-hue) + 13) 90% 89%;  /* #C8F2FC */
  --color-information-100: var(--color-information-hue) 100% 38%;           /* #00A7C3 */
  --color-information-120: calc(var(--color-information-hue) + 1) 100% 26%; /* #007187 */
  --color-information-200: calc(var(--color-information-hue) - 1) 87% 12%;  /* #04333A */

  /** Success **/
  --color-success-hue: 150;
  --color-success-10: var(--color-success-hue) 88% 93%;             /* #DFFDEE */
  --color-success-50: var(--color-success-hue) 91% 87%;             /* #BFFCDD */
  --color-success-100: var(--color-success-hue) 100% 37%;           /* #00BC5D */
  --color-success-120: calc(var(--color-success-hue) + 8) 100% 23%; /* #00754A */
  --color-success-200: calc(var(--color-success-hue) - 1) 79% 11%;  /* #06331C */

  /** Warning **/
  --color-warning-hue: 33;
  --color-warning-10: calc(var(--color-warning-hue) + 1) 100% 94%;  /* #FFF1DF */
  --color-warning-50: calc(var(--color-warning-hue) - 2) 100% 88%;  /* #FFE1C0 */
  --color-warning-100: var(--color-warning-hue) 100% 48%;           /* #F38500 */
  --color-warning-120: calc(var(--color-warning-hue) - 9) 100% 35%; /* #B34700 */
  --color-warning-200: var(--color-warning-hue) 97% 14%;            /* #462701 */

  /** Danger **/
  --color-danger-hue: 3;
  --color-danger-10: calc(var(--color-danger-hue) - 3) 100% 96%;  /* #FFEBEB */
  --color-danger-50: calc(var(--color-danger-hue) - 2) 100% 92%;  /* #FFD5D4 */
  --color-danger-100: var(--color-danger-hue) 100% 61%;           /* #FF453A */
  --color-danger-120: calc(var(--color-danger-hue) - 3) 82% 39%;  /* #B31212 */
  --color-danger-200: calc(var(--color-danger-hue) - 1) 91% 13%;  /* #3E0503 */

  /** Blue **/
  --color-blue-hue: 218;
  --color-blue-100: var(--color-blue-hue) 100% 82%;               /* #A1C4FF */

  /** Green **/
  --color-green-hue: 172;
  --color-green-100: var(--color-green-hue) 50% 72%;              /* #94DBD1 */

  /** Orange **/
  --color-orange-hue: 32;
  --color-orange-100: var(--color-orange-hue) 97% 75%;            /* #FDC584 */

  /** Red **/
  --color-red-hue: 0;
  --color-red-100: var(--color-red-hue) 100% 82%;                 /* #FFA1A1 */

  /** Purple **/
  --color-purple-hue: 261;
  --color-purple-100: var(--color-purple-hue) 93% 84%;            /* #CBB1FC */

  /** Pink **/
  --color-pink-hue: 331;
  --color-pink-100: var(--color-pink-hue) 100% 82%;               /* #FFA1CE */

  /* [Newly added] mint */
  --color-mint-hue: 177;
  --color-mint-500: calc(var(--color-mint-hue) + 1) 54%  69%;
  /* [Finish added] */


  /* transparent */
  --transparent: 0 0% 0% / 0;
}


:root {
  --color-pink-text: var(--color-primary-100);

  --color-text-disabled: var(--color-neutral-20);
  --color-text-offline: var(--color-neutral-50);
  --color-text-info: var(--color-information-100);
  --color-text-danger: var(--color-danger-100);
  --color-text-warning: var(--color-warning-100);
  --color-text-success: var(--color-success-100);

  --color-text-gray: var(--color-neutral-50);

  --color-border: var(--color-neutral-10);
  --scroll-color: var(--color-neutral-20);

  #{$theme-dark} {
    --color-pink-text: var(--color-primary-200);

    --color-text-disabled: var(--color-neutral-60);
    --color-text-offline: var(--color-neutral-50);
    --color-text-info: var(--color-information-100);
    --color-text-danger: var(--color-danger-100);
    --color-text-warning: var(--color-warning-100);
    --color-text-success: var(--color-success-100);

    --color-text-gray: var(--color-neutral-20);

    --color-border: var(--color-neutral-85);
    --scroll-color: var(--color-neutral-80);
  }
}