@import "./global.css";

:root {
  color-scheme: dark;
  --bgDark: #101828;
  --white: #fff;
  --white-10: rgba(255, 255, 255, 0.1);
  --white-30: rgba(255, 255, 255, 0.3);
  --red-200: #C98484;
  --red-400: #FF6467;
  --red-500: #ef4444;
  --red-500-10: rgba(239, 68, 68, 0.1);
  --red-500-20: rgba(239, 68, 68, 0.2);
  --red-600: #B03F3F;
  --red-600-20: rgba(181, 45, 45, 0.2);
  --green-100: #B9F8CF;
  --green-200: #A7EEC2;
  --green-500: #05df72;
  --green-600: #22c55e;
  --green-600-20: rgba(34, 197, 94, 0.2);
  --green-700: #4FA46E;
  --yellow-500: #f4c430;
  --yellow-600: #DA9547;
  --yellow-600-20: rgba(218, 149, 71, 0.2);
  --orange-100: #FFDAAF;
  --orange-200: #FFC079;
  --orange-500: #ff8904;
  --orange-600: #E07D0D;
  --orange-600-20: rgba(224, 125, 13, 0.2);
  --blue-100: #BEDBFF;
  --blue-200: #8EC5FF;
  --blue-500: #50a2ff;
  --blue-500-20: rgba(80, 162, 255, 0.2);
  --blue-500-50: rgba(80, 162, 255, 0.5);
  --blue-600: #2b7fff;
  --blue-600-20: rgba(43, 127, 255, 0.2);
  --blue-600-30: rgba(43, 127, 255, 0.3);
  --blue-600-50: rgba(43, 127, 255, 0.5);
  --blue-700: #155dfc;
  --blue-700-50: rgba(31, 93, 252, 0.5);
  --text: #f5f7ff;
  --muted: #99a1af;
  --muted-20: rgba(153, 161, 175, 0.2);
  --muted-50: rgba(153, 161, 175, 0.5);
  --gray-500: #9Ca0a7;
  --dark-400: #485872;
  --dark-500: #404F68;
  --dark-500-20: rgba(64, 79, 104, 0.2);
  --dark-600: #39475D;
  --dark-700: #2e3b50;
  --dark-700-20: rgba(46, 59, 80, 0.2);
  --dark-700-50: rgba(46, 59, 80, 0.5);
  --dark-800: #1e2939;
  --dark-900: #162130;
  --dark-950: #101828;
  --black-300: #abb3c2;
  --black-900: #232529;
  --borderColor: #364153;
  --shadow: 0 20px 45px rgba(32, 32, 32, 0.6);
  --shadow-s: 0 0 14px rgba(32, 32, 32, 0.3);
  --shadow-m: 0 0 25px rgba(32, 32, 32, 0.5);
  --animate-ping: ping 1.5s cubic-bezier(0, 0, .2, 1) infinite;

  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-18: 18px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-50: 50%;
  --radius-999: 999px;

  --font-bd-10: 10px;
  --font-bd-12: 12px;
  --font-bd-14: 14px;
  --font-bd-16: 16px;
  --font-hd-18: 18px;
  --font-hd-20: 20px;
  --font-hd-24: 24px;
  --font-hd-26: 26px;
  --font-hd-30: 30px;
  --font-hd-38: 38px;
  --font-hd-48: 48px;
  --font-hd-60: 60px;

  --padding-4: 4px;
  --padding-8: 8px;
  --padding-12: 12px;
  --padding-14: 14px;
  --padding-16: 16px;
  --padding-20: 20px;
  --padding-24: 24px;
  --padding-28: 28px;
  --padding-32: 32px;
  --padding-36: 36px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* css 시작 */
body {
  margin: 0;
  background: var(--bgDark);
  color: var(--text);
  line-height: 1.4;
}