:root{
  --wh: #ffffff;
  --bk: #000000;

  --gray-50: #F9F9F9;
  --gray-100: #F4F4F4;
  --gray-200: #ECECEC;
  --gray-300: #DDDDDD;
  --gray-400: #BABABA;
  --gray-500: #9A9A9A;
  --gray-600: #727272;
  --gray-700: #5E5E5E;
  --gray-800: #3F3F3F;
  --gray-900: #1E1E1E;
  --gray-950: #1F242A;

  --red-50: #FFF5F5;
  --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;
  --red-950: #5F1818;

  --pink-50: #FFF8FA;
  --pink-100: #FFE6EB;
  --pink-200: #FECAD4;
  --pink-300: #FFAABC;
  --pink-400: #F27C98;
  --pink-500: #F35177;
  --pink-600: #E60F48;
  --pink-700: #C10044;
  --pink-800: #AE0042;
  --pink-900: #8B003E;
  --pink-950: #8b003e;

  --orange-50: #FFF4EF;
  --orange-100: #FFEAE4;
  --orange-200: #FACABB;
  --orange-300: #F8B09A;
  --orange-400: #FF8A54;
  --orange-500: #FF6E2B;
  --orange-600: #F05323;
  --orange-700: #DA4C20;
  --orange-800: #AA3B19;
  --orange-900: #842E13;
  --orange-950: #65230F;

  --blue-50: #E6FBFF;
  --blue-100: #C6F3FB;
  --blue-200: #96E8F5;
  --blue-300: #19D3EB;
  --blue-400: #00C9E6;
  --blue-500: #00BFE0;
  --blue-600: #00AFCD;
  --blue-700: #009AB2;
  --blue-800: #008699;
  --blue-900: #006269;
  --blue-950: #0F2D62;

  --green-50: #E9FFF7;
  --green-100: #C7F5E3;
  --green-200: #A4F5D7;
  --green-300: #0FE6AD;
  --green-400: #00DE99;
  --green-500: #00D586;
  --green-600: #00C57A;
  --green-700: #00B16B;
  --green-800: #009F5D;
  --green-900: #007E45;
  --green-950: #0E432D;

  --yellow-50: #FFFBED;
  --yellow-100: #FFF4D2;
  --yellow-200: #FFEAAC;
  --yellow-300: #FFE188;
  --yellow-400: #FFDB71;
  --yellow-500: #FFD24E;
  --yellow-600: #E8BF46;
  --yellow-700: #B59537;
  --yellow-800: #8C742A;
  --yellow-900: #6B5820;
  --yellow-950: #463810;

  --indigo-50: #ECEFF5;
  --indigo-100: #D5DDEB;
  --indigo-200: #BFCCE1;
  --indigo-300: #8497B9;
  --indigo-400: #607AA4;
  --indigo-500: #204B84;
  --indigo-600: #19447C;
  --indigo-700: #0F3B71;
  --indigo-800: #063164;
  --indigo-900: #00224d;
  --indigo-950: #00224D;


  /* ==================== */
  /* primary color    */
  /* ==================== */
  --primary-50: var(--pink-50);
  --primary-100: var(--pink-100);
  --primary-200: var(--pink-200);
  --primary-300: var(--pink-300);
  --primary-400: var(--pink-400);
  --primary-500: var(--pink-500);
  --primary-600: var(--pink-600);
  --primary-700: var(--pink-700);
  --primary-800: var(--pink-800);
  --primary-900: var(--pink-900);
  --primary-950: var(--pink-950);

  --surface-50: var(--gray-50);
  --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);
  --surface-950: var(--gray-950);

  --secondary-50: var(--indigo-50);
  --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);
  --secondary-950: var(--indigo-950);

  /* ==================== */
  /* Background Colors */
  /* ==================== */
  /* 기본 배경 (Neutral Backgrounds) */
  --bg-default: var(--wh);
  --bg-primary: var(--surface-50); 
  --bg-secondary: var(--surface-100);
  --bg-tertiary: var(--surface-300);
  --bg-disabled: var(--surface-200);

  /* 반전 배경 (Inverse Backgrounds) */
  --bg-inverse: var(--surface-950);
  --bg-inverse-secondary: var(--surface-900);

  /* 브랜드 컬러 배경 (Brand Backgrounds) */
  --bg-brand: var(--primary-500);
  --bg-brand-strong: var(--primary-600);
  --bg-brand-subtle: var(--primary-50);
  --bg-brand-subtler: var(--primary-100);

  /* 상태 배경 (State Backgrounds) - 확장 가능 */
  --bg-danger: var(--red-600);
  --bg-danger-subtle: var(--red-50);
  --bg-warning: var(--yellow-500);
  --bg-warning-subtle: var(--yellow-50);
  --bg-success: var(--green-600);
  --bg-success-subtle: var(--green-50);
  --bg-information: var(--blue-600);
  --bg-information-subtle: var(--blue-50);

  /* ==================== */
  /* Text Colors */
  /* ==================== */
  /* 기본 텍스트 (Neutral Text) - 진함 → 연함 순서 */
  --text-default: var(--surface-950);
  --text-primary: var(--surface-800);
  --text-secondary: var(--surface-700);
  --text-tertiary: var(--surface-500);
  --text-disabled: var(--surface-400);
  /* 반전 텍스트 (Inverse Text) */
  --text-inverse: var(--wh);
  --text-inverse-secondary: var(--surface-50);
  /* 브랜드 컬러 텍스트 (Brand Text) */
  --text-brand: var(--primary-500);
  --text-brand-strong: var(--primary-600);
  /* 상태 텍스트 (State Text) - 확장 가능 */
  --text-danger: var(--red-600);
  --text-warning: var(--yellow-700);
  --text-success: var(--green-600);
  --text-information: var(--blue-600);

  /* ==================== */
  /* Border Colors */
  /* ==================== */
  /* 기본 보더 (Neutral Borders) */
  --border-default: var(--surface-50);
  --border-primary: var(--surface-100);
  --border-secondary: var(--surface-200);
  --border-tertiary: var(--surface-300);
  --border-disabled: var(--surface-200);
  /* 반전 보더 (Inverse Borders) */
  --border-inverse: var(--surface-800);
  --border-inverse-secondary: var(--surface-700);
  /* 브랜드 컬러 보더 (Brand Borders) */
  --border-brand: var(--primary-500);
  --border-brand-strong: var(--primary-400);
  --border-brand-subtle: var(--primary-200);
  /* 상태 보더 (State Borders) - 확장 가능 */
  --border-danger: var(--red-500);
  --border-warning: var(--yellow-600);
  --border-success: var(--green-500);
  --border-information: var(--blue-600);

  /* ==================== */
  /* Shadow / Overlay */
  /* ==================== */
  --shadow-primary: 0px 4px 8px 0px rgba(0,0,0,0.1);

  /* ==================== */
  /* Icon Colors */
  /* ==================== */
  /* 기본 아이콘 (Neutral Icons) */
  --icon-default: var(--surface-600);
  --icon-subtle: var(--surface-500);
  --icon-disabled: var(--surface-300);
  /* 반전 아이콘 (Inverse Icons) */
  --icon-inverse: var(--wh);
  /* 강조 아이콘 (Emphasis Icons) */
  --icon-emphasis: var(--primary-500);
  /* 인터랙티브 아이콘 (Interactive Icons) */
  --icon-interactive: var(--primary-500);
  --icon-interactive-hover: var(--primary-600);
  /* 상태 아이콘 (State Icons) - 확장 가능 */
  --icon-danger: var(--red-500);
  --icon-warning: var(--yellow-600);
  --icon-success: var(--blue-500);
  --icon-information: var(--blue-600);

  /* Heading Text */
  --text-h2: 2.4rem; /* 24px */
  --text-h3: 2.2em; /* 22px */
  --text-h4: 2em; /* 20px */
  --text-h5: 1.8em; /* 18px */
  --text-h6: 1.6em; /* 16px */
  
  /* Text */
  --text-3xs: 0.8rem;  /* 8px */
  --text-2xs: 1rem;  /* 10px */
  --text-xs: 1.1rem;    /* 11px */
  --text-sm: 1.2rem;   /* 12px */
  --text-base: 1.4rem;     /* 14px */
  --text-md: 1.6rem;   /* 16px */
  --text-lg: 1.8rem;    /* 18px */
  --text-xl: 2rem;     /* 20px */
  --text-2xl: 2.2rem;   /* 22px */
  --text-3xl: 2.4rem;      /* 24px */

  /* 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;

  /* line-height */
  --leading-base: 1em;
  --leading-xs: 1.2em;
  --leading-sm: 1.25em;
  --leading-md: 1.35em;
  --leading-lg: 1.375em;
  --leading-xl: 1.5em;

  /* border-radius */
  --rounded-2xs: 0.2rem; /* 2px */
  --rounded-xs: 0.4rem; /* 4px */
  --rounded-sm: 0.6rem; /* 6px */
  --rounded-md: 0.8rem; /* 8px */
  --rounded-lg: 1rem;
  --rounded-xl: 1.5em;
  --rounded-circle: 50%;
  --rounded-full: 10em;

  /* ==================== */
  /* Spacing Scale (gap / padding / margin) */
  /* ==================== */
  --space-4xs: 0.2rem; /* 2px */
  --space-3xs: 0.4rem; /* 4px */
  --space-2xs: 0.6rem; /* 6px */
  --space-xs: 0.8rem; /* 8px */
  --space-sm: 1rem; /* 10px */
  --space-md: 1.2rem; /* 12px */
  --space-lg: 1.4rem; /* 14px */
  --space-xl: 1.6rem;
  --space-2xl: 1.8rem;
  --space-3xl: 2rem;
  --space-4xl: 2.2rem;

}