@charset "uft-8";

/* color guide */
:root,
.light-mode {
  --bg-color: rgba(255, 255, 255, 1);
  --text-color: rgba(20, 20, 20, 1);
  --red: rgba(255, 59, 48, 1);
  --orange: rgba(255, 149, 0, 1);
  --yellow: rgba(255, 204, 0, 1);
  --green: rgba(40, 205, 65, 1);
  --mint: rgba(0, 199, 190, 1);
  --teal: rgba(89, 173, 196, 1);
  --cyan: rgba(85, 190, 240, 1);
  --blue: rgba(0, 122, 255, 1);
  --indigo: rgba(88, 86, 214, 1);
  --purple: rgba(175, 82, 222, 1);
  --pink: rgba(255, 45, 85, 1);
  --brown: rgba(162, 132, 94, 1);
  --gray: rgba(142, 142, 147, 1);
  --gray1: rgba(142, 142, 147, 1);
  --gray2: rgba(174, 174, 178, 1);
  --gray3: rgba(199, 199, 204, 1);
  --gray4: rgba(209, 209, 214, 1);
  --gray5: rgba(229, 229, 234, 1);
  --gray6: rgba(242, 242, 247, 1);
}

.dark-mode {
  --bg-color: rgba(0, 0, 0, 1);
  --text-color: rgba(235, 235, 235, 1);
  --red: rgba(255, 69, 58, 1);
  --orange: rgba(255, 159, 10, 1);
  --yellow: rgba(255, 214, 10, 1);
  --green: rgba(50, 215, 75, 1);
  --mint: rgba(102, 212, 207, 1);
  --teal: rgba(106, 196, 220, 1);
  --cyan: rgba(90, 200, 245, 1);
  --blue: rgba(10, 132, 255, 1);
  --indigo: rgba(94, 92, 230, 1);
  --purple: rgba(191, 90, 242, 1);
  --pink: rgba(255, 55, 95, 1);
  --brown: rgba(172, 142, 104, 1);
  --gray: rgba(152, 152, 157, 1);
  --gray1: rgba(142, 142, 147, 1);
  --gray2: rgba(99, 99, 102, 1);
  --gray3: rgba(72, 72, 74, 1);
  --gray4: rgb(58, 58, 60);
  --gray5: rgba(44, 44, 46, 1);
  --gray6: rgba(28, 28, 30, 1);
}

.accessible-light-mode {
  --bg-color: rgba(255, 255, 255, 1);
  --text-color: rgba(0, 0, 0, 1);
  --red: rgba(215, 0, 21, 1);
  --orange: rgba(201, 52, 0, 1);
  --yellow: rgba(160, 90, 0, 1);
  --green: rgba(0, 125, 27, 1);
  --mint: rgba(12, 129, 123, 1);
  --teal: rgba(0, 130, 153, 1);
  --cyan: rgba(0, 113, 164, 1);
  --blue: rgba(0, 64, 221, 1);
  --indigo: rgba(54, 52, 163, 1);
  --purple: rgba(173, 68, 171, 1);
  --pink: rgba(211, 15, 69, 1);
  --brown: rgba(127, 101, 69, 1);
  --gray: rgba(105, 105, 110, 1);
  --gray1: rgba(108, 108, 112, 1);
  --gray2: rgba(142, 142, 147, 1);
  --gray3: rgba(174, 174, 178, 1);
  --gray4: rgba(188, 188, 192, 1);
  --gray5: rgba(216, 216, 220, 1);
  --gray6: rgba(235, 235, 240, 1);
}

.accessible-dark-mode {
  --bg-color: rgba(0, 0, 0, 1);
  --text-color: rgba(255, 255, 255, 1);
  --red: rgba(255, 105, 97, 1);
  --orange: rgba(255, 179, 64, 1);
  --yellow: rgba(255, 212, 38, 1);
  --green: rgba(49, 222, 75, 1);
  --mint: rgba(102, 212, 207, 1);
  --teal: rgba(93, 230, 255, 1);
  --cyan: rgba(112, 215, 255, 1);
  --blue: rgba(64, 156, 255, 1);
  --indigo: rgba(125, 122, 255, 1);
  --purple: rgba(218, 143, 255, 1);
  --pink: rgba(255, 100, 130, 1);
  --brown: rgba(181, 148, 105, 1);
  --gray: rgba(152, 152, 157, 1);
  --gray1: rgba(174, 174, 178, 1);
  --gray2: rgba(124, 124, 128, 1);
  --gray3: rgba(84, 84, 86, 1);
  --gray4: rgba(68, 68, 70, 1);
  --gray5: rgba(54, 54, 56, 1);
  --gray6: rgba(36, 36, 36, 1);
}


/*

[컬러가이드] : 애플 개발자 가이드 참조
- https://developer.apple.com/design/human-interface-guidelines/color
- macOS system colors + iOS, iPad system gray colors
- 컬러종류 : default(Light), default(Dark), Accessible(Light), Accessible(Dark)

*/