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

  --gray-50: #F5F5F5;
  --gray-100: #EFEDED;
  --gray-200: #E0E0E0;
  --gray-300: #D9D9D9;  /* #D9D9D9 · #D5D5D5 그룹 */
  --gray-400: #C4C7C7;
  --gray-500: #6B7280;
  --gray-600: #666666;
  --gray-700: #5A5A5A;
  --gray-800: #444748;
  --gray-900: #222222;  /* #222222 · #1C1B1F · #1B1C1C 그룹 */
  --gray-950: #121212;  /* #121212 · #111111 그룹 */

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

  --orange-50: #FFF0EC;  /* #FB4007 @ 8% (=#FB400714) over white */
  --orange-100: #FFE0D6;
  --orange-200: #FEC3B0;
  --orange-300: #FB9F7D;
  --orange-400: #FB7038;
  --orange-500: #FB4007;
  --orange-600: #E23A06;
  --orange-700: #BC3005;
  --orange-800: #8F2404;
  --orange-900: #6E1C03;
  --orange-950: #4B1302;

  --blue-50: #F1F4F8;
  --blue-100: #E0E7F0;
  --blue-200: #C4D0DF;
  --blue-300: #9FB1C7;
  --blue-400: #7790AE;
  --blue-500: #4D6B8C;
  --blue-600: #425C78;
  --blue-700: #364B62;
  --blue-800: #2A3B4D;
  --blue-900: #202D3B;
  --blue-950: #161E27;

  --green-50: #F5FFFA;
  --green-100: #E9F6F0;
  --green-200: #D1EEE2;
  --green-300: #6AC9A2;
  --green-400: #6AC9A2;
  --green-500: #4EB389;
  --green-600: #22A06B;
  --green-700: #1F9261;
  --green-800: #18724C;
  --green-900: #13583B;
  --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;

  --purple-50: #F9F3FF;
  --purple-100: #ECE0F9;
  --purple-200: #D0B6E6;
  --purple-300: #B992DA;
  --purple-400: #9860C9;
  --purple-500: #7E34BD;
  --purple-600: #6612AF;
  --purple-700: #5D109F;
  --purple-800: #480D7C;
  --purple-900: #380A60;
  --purple-950: #2B084A;


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

  --surface-0: #ffffff;   
  --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);
  --surface-1000: #000000;  

  /* ==================== */
  /* Background Colors */
  /* ==================== */
  /* 기본 배경 (Neutral Backgrounds) */
  --bg-default: var(--surface-0);
  --bg-primary: var(--surface-50);
  --bg-brand: var(--primary-500);;
  --disabled-bg: var(--surface-50);
  --bg-banner: linear-gradient(90deg, #8D8BD2, var(--bg-brand));

  /* ==================== */
  /* Text Colors */
  /* ==================== */
  /* 기본 텍스트 (Neutral Text) - 진함 → 연함 순서 */
  --text-default: var(--surface-950);
  --text-primary: var(--surface-900);
  --text-secondary: var(--surface-800);
  --text-tertiary: var(--surface-600);
  --text-quaternary: var(--surface-700);
  --disabled-text: var(--surface-600);
  /* 브랜드 컬러 텍스트 (Brand Text) */
  --text-brand: var(--primary-500);

  /* ==================== */
  /* Border Colors */
  /* ==================== */
  /* 기본 보더 (Neutral Borders) */
  --border-default: var(--surface-300);
  --border-primary: var(--surface-400);
  --border-brand: var(--primary-500);
  --border-inverse: var(--surface-0);
  --disabled-border: var(--surface-50);

  /* Heading Text */
  --text-h1: 3rem; /* 48px */
  --text-h2: 2em; /* 32px */
  --text-h3: 1.625em; /* 26px */
  --text-h4: 1.5em; /* 24px */
  --text-h5: 1.25em; /* 20px */
  --text-h6: 1em; /* 16px */
  
  /* Text */
  --text-2xs: 0.625rem;  /* 10px */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-md: 1.125rem;   /* 18px */
  --text-lg: 1.25rem;   /* 20px */
  --text-xl: 1.5rem;     /* 24px */
  --text-2xl: 1.75rem;   /* 28px */
  --text-3xl: 2rem;      /* 32px */
  --text-4xl: 2.25rem;   /* 36px */

  /* 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-sm: 1.25em;
  --leading-md: 1.35em;
  --leading-lg: 1.375em;
  --leading-xl: 1.5em;

  /* border-radius */
  --rounded-sm: 0.375rem; /* 6px */
  --rounded-md: 0.5rem; /* 8px */
  --rounded-lg: 1rem;
  --rounded-xl: 1.5em;
  --rounded-circle: 50%;
  --rounded-full: 10em;

  /* ==================== */
  /* Spacing Scale (gap / padding / margin) */
  /* ==================== */
  --space-4xs: 0.125rem; /* 2px */
  --space-3xs: 0.25rem; /* 4px */
  --space-2xs: 0.375rem; /* 6px */
  --space-xs: 0.5rem; /* 8px */
  --space-sm: 0.625rem; /* 10px */
  --space-md: 0.75rem; /* 12px */
  --space-lg: 0.875rem; /* 14px */
  --space-xl: 1rem;
  --space-2xl: 1.25rem;
  --space-3xl: 1.5rem;
  --space-4xl: 2rem;

}

/* ==================== */
/* 반응형 타이포그래피 */
/* ==================== */
@media (max-width: 1024px) {
  :root {
    --text-2xs: 10px;
    --text-xs: 11px;
    --text-sm: 12px;
  }
}

/* ==================== */
/* Dark Mode 활성화: <html data-theme="dark"> */
/* ==================== */
:root[data-theme="dark"] {
  --surface-0: #000000;
  --surface-1000: #ffffff;

  /* surface(중성) 스케일 반전 */
  --surface-50:  var(--gray-950);
  --surface-100: var(--gray-900);
  --surface-200: var(--gray-800);
  --surface-300: var(--gray-700);
  --surface-400: var(--gray-600);
  --surface-500: var(--gray-500);
  --surface-600: var(--gray-400);
  --surface-700: var(--gray-300);
  --surface-800: var(--gray-200);
  --surface-900: var(--gray-100);
  --surface-950: var(--gray-50);

  /* primary(브랜드) 스케일 반전 */
  --primary-50:  var(--orange-950);
  --primary-100: var(--orange-900);
  --primary-200: var(--orange-800);
  --primary-300: var(--orange-700);
  --primary-400: var(--orange-600);
  --primary-500: var(--orange-500);
  --primary-600: var(--orange-400);
  --primary-700: var(--orange-300);
  --primary-800: var(--orange-200);
  --primary-900: var(--orange-100);
  --primary-950: var(--orange-50);

  /* Secondary Button (연오랜지 — 소프트 브랜드) */
  --btn-secondary-bg: var(--primary-500);
  --btn-secondary-bg-hover: var(--primary-600);
  --btn-secondary-bg-pressed: var(--primary-700);
  --btn-secondary-text: var(--surface-1000);
  --btn-secondary-border: var(--primary-500);  
  /* CTA Button (흰 배경 + 브랜드 텍스트 — filled pill) */
  --btn-cta-bg: var(--wh);
  --btn-cta-bg-hover: var(--primary-900);
  --btn-cta-text: var(--primary-500);
  --btn-cta-text-hover: var(--primary-600);
  --btn-cta-text-pressed: var(--primary-800);

}