@charset "UTF-8";
:root{
  --wh: #ffffff;
  --bk: #000000;

  --gray-100: #F9F9F9;
  --gray-200: #F6F6F6;
  --gray-300: #F4F4F4;
  --gray-400: #ECECEC; 
  --gray-500: #DDDDDD;
  --gray-600: #BABABA;
  --gray-700: #767676;
  --gray-800: #3F3F3F;
  --gray-900: #111111;

  --red-100: #FFDDDD;
  --red-200: #FFC4C4;
  --red-300: #FFA8A8;
  --red-400: #FF8080;
  --red-500: #FF6868;
  --red-600: #FF4242;
  --red-700: #CE3535;
  --red-800: #A02929;
  --red-900: #7C2020;

  --orange-100: #FFF2E1;
  --orange-200: #FFDEB4;
  --orange-300: #FFC884;
  --orange-400: #FFB255;
  --orange-500: #FE9221;
  --orange-600: #FA8620;
  --orange-700: #F3771F;
  --orange-800: #EC671D;
  --orange-900: #E14D1C;

  --blue-100: #F8FBFF;
  --blue-200: #E3F1FF;
  --blue-300: #BBDCFF;
  --blue-400: #5FB0FF;
  --blue-500: #218EFF;
  --blue-600: #287FF7;
  --blue-700: #2B6DE2;
  --blue-800: #2C5BD0;
  --blue-900: #2B3AB0;

  --indigo-100: #E8EAF3;
  --indigo-200: #C4CBE2;
  --indigo-300: #7989B9;
  --indigo-400: #5D6FAB;
  --indigo-500: #40579E;
  --indigo-600: #3A4F94;
  --indigo-700: #314589;
  --indigo-800: #2A3B7C;
  --indigo-900: #1F2B65;
    
  /* ==================== */
  /* primary color    */
  /* ==================== */ 
  --primary-100: var(--blue-100);
  --primary-200: var(--blue-200);
  --primary-300: var(--blue-300);
  --primary-400: var(--blue-400);
  --primary-500: var(--blue-500);
  --primary-600: var(--blue-600);
  --primary-700: var(--blue-700);
  --primary-800: var(--blue-800);
  --primary-900: var(--blue-900);

  --secondary-100: var(--indigo-100);
  --secondary-200: var(--indigo-200);
  --secondary-300: var(--indigo-300);
  --secondary-400: var(--indigo-400);
  --secondary-500: var(--indigo-500);
  --secondary-600: var(--indigo-600);
  --secondary-700: var(--indigo-700);
  --secondary-800: var(--indigo-800);
  --secondary-900: var(--indigo-900);

  --surface-100: var(--gray-100);
  --surface-200: var(--gray-200);
  --surface-300: var(--gray-300);
  --surface-400: var(--gray-400);
  --surface-500: var(--gray-500);
  --surface-600: var(--gray-600);
  --surface-700: var(--gray-700);
  --surface-800: var(--gray-800);
  --surface-900: var(--gray-900);


  /* overlay */
  --shadow-primary: 0 0.125em 0.375em rgba(0,0,0,0.1);

  /* bg */
  --bg-default: var(--surface-200);
  --bg-primary: var(--surface-100);
  --bg-secondary: var(--wh);
  --bg-tertiary: var(--surface-300);

  --bg-brand: var(--primary-300);
  --bg-brand-strong: var(--primary-500);
  --bg-brand-subtle: var(--primary-200);
  --bg-brand-subtler: var(--primary-100);

  /* 상태 배경 */
  --bg-danger: var(--orenge-300);
  --bg-success: var(--surface-400);

  /* text color */
  --text-default: var(--surface-900);
  --text-primary: var(--surface-800);
  --text-secondary: var(--surface-700);
  --text-tertiary: var(--surface-600);
  
  --text-inverse: var(--wh);

  --text-brand: var(--primary-700);
  --text-brand-secondary: var(--primary-400);
  --text-brand-strong: var(--secondary-900);

  /* 상태 텍스트 */
  --text-danger: var(--surface-800);
  --text-success: var(--surface-800);

  /* border */
  --border-default: var(--surface-500);
  --border-primary: var(--surface-600);
  --border-secondary: var(--surface-400);
  
  --border-brand: var(--primary-300);

  /* Text */
  --text-4xl: 1.625em; /* 26px */
  --text-3xl: 1.5em; /* 24px */
  --text-2xl: 1.375em; /* 22px */
  --text-xl: 1.25em; /* 20px */
  --text-lg: 1.126em; /* 18px */
  --text-base: 1em; /* 16px */
  --text-sm: 0.876em; /* 14px */
  --text-xs: 0.75em; /* 12px */
  --text-2xs: 0.625em; /* 10px */

  /* font-weight */
  --font-thin: 100;
  --font-extraLight: 200;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;

  /* border-radius */
  --rounded-xs: 0.25em;
  --rounded-sm: 0.31em; /* 5px */
  --rounded-md: 0.5em; /* 8px */
  --rounded-lg: 1em;
  --rounded-xl: 1.25em;
  --rounded-circle: 50%;
  --rounded-full: 10em;

}