:root {
  /* ── Primitive: Gray ─────────────────── */
  --gray-50:   #f9f9fb;
  --gray-100:  #f2f3f8;
  --gray-200:  #e5e8ef;
  --gray-300:  #cbd1dc;
  --gray-400:  #b4bbcb;
  --gray-500:  #99a1b1;
  --gray-600:  #697383;
  --gray-700:  #4a5667;
  --gray-800:  #354153;
  --gray-900:  #262f3c;
  --gray-1000: #141a24;

  /* ── Primitive: Blue ─────────────────── */
  --blue-50:  #ebf5ff;
  --blue-100: #d6ebff;
  --blue-200: #99ceff;
  --blue-300: #6bb5ff;
  --blue-400: #3393ff;
  --blue-500: #0078ff;
  --blue-600: #0069ff;
  --blue-700: #0052e0;
  --blue-800: #0042c7;
  --blue-900: #0033a9;

  /* ── Primitive: Red ──────────────────── */
  --red-50:  #fff0f3;
  --red-100: #ffdbdf;
  --red-200: #ffa1ac;
  --red-300: #ff7686;
  --red-400: #ff576a;
  --red-500: #ff3a5b;
  --red-600: #f51441;
  --red-700: #e60532;
  --red-800: #d30831;
  --red-900: #c10027;

  /* ── Primitive: Green ────────────────── */
  --green-50:  #e6fef0;
  --green-100: #d3fde5;
  --green-200: #a0fcc8;
  --green-300: #5ef7aa;
  --green-400: #14e28f;
  --green-500: #04ca81;
  --green-600: #00bb83;
  --green-700: #00ae82;
  --green-800: #00a180;
  --green-900: #008d7a;

  /* ── Primitive: Orange ───────────────── */
  --orange-50:  #fff8e6;
  --orange-100: #fff3cc;
  --orange-200: #ffdd99;
  --orange-300: #ffc566;
  --orange-400: #ffa940;
  --orange-500: #ff8800;
  --orange-600: #fa7900;
  --orange-700: #f56a00;
  --orange-800: #ec5704;
  --orange-900: #dd4600;

  /* ── Primitive: RedOrange ────────────── */
  --redorange-50:  #fff5eb;
  --redorange-100: #ffe1c2;
  --redorange-200: #ffba82;
  --redorange-300: #ff9651;
  --redorange-400: #ff7d37;
  --redorange-500: #ff7017;
  --redorange-600: #f8530c;
  --redorange-700: #f04000;
  --redorange-800: #e73803;
  --redorange-900: #de2702;

  /* ── Primitive: LightBlue ────────────── */
  --lightblue-50:  #ebfaff;
  --lightblue-100: #d6f4ff;
  --lightblue-200: #8fdfff;
  --lightblue-300: #54c9ff;
  --lightblue-400: #33beff;
  --lightblue-500: #00aeff;
  --lightblue-600: #00a2fa;
  --lightblue-700: #0094f7;
  --lightblue-800: #0086ec;
  --lightblue-900: #006ddf;

  /* ── Primitive: Purple ───────────────── */
  --purple-50:  #f5f0ff;
  --purple-100: #eae1fe;
  --purple-200: #d2c1fc;
  --purple-300: #bca2fc;
  --purple-400: #ab8aff;
  --purple-500: #956bff;
  --purple-600: #8355ff;
  --purple-700: #7444f4;
  --purple-800: #622eff;
  --purple-900: #481bdb;

  /* ── Primitive: Indigo ───────────────── */
  --indigo-50:  #eceffe;
  --indigo-100: #d7defe;
  --indigo-200: #b5c4fd;
  --indigo-300: #899cfb;
  --indigo-400: #647dff;
  --indigo-500: #4b68ff;
  --indigo-600: #3554f8;
  --indigo-700: #2c46f0;
  --indigo-800: #1c36e0;
  --indigo-900: #0f27c7;

  /* ── Primitive: Magenta ──────────────── */
  --magenta-50:  #fff0f7;
  --magenta-100: #ffe1ef;
  --magenta-200: #ffafd2;
  --magenta-300: #ff85b6;
  --magenta-400: #ff67a6;
  --magenta-500: #ff4397;
  --magenta-600: #f52c87;
  --magenta-700: #e81e79;
  --magenta-800: #d71968;
  --magenta-900: #c60052;

  /* ── Primitive: Cyan ─────────────────── */
  --cyan-50:  #e5fffc;
  --cyan-100: #cdfefb;
  --cyan-200: #a2f6f3;
  --cyan-300: #66eae8;
  --cyan-400: #42dfe5;
  --cyan-500: #01c9d7;
  --cyan-600: #00b8d0;
  --cyan-700: #00a7c1;
  --cyan-800: #0097b1;
  --cyan-900: #0086a0;

  /* ── Primitive: Lime ─────────────────── */
  --lime-50:  #f2ffd4;
  --lime-100: #e3fca9;
  --lime-200: #cdf779;
  --lime-300: #aff03e;
  --lime-400: #96e311;
  --lime-500: #8ad510;
  --lime-600: #78c800;
  --lime-700: #68b800;
  --lime-800: #56ab00;
  --lime-900: #499c00;

  /* ── Primitive: Base ─────────────────── */
  --color-black: #000000;
  --color-white: #ffffff;

  /* ── Semantic: Text ──────────────────── */
  --color-text-primary:   var(--gray-1000);   /* #141a24 */
  --color-text-secondary: var(--gray-600);    /* #697383 */
  --color-text-disabled:  var(--gray-300);    /* #cbd1dc */
  --color-text-inverse:   var(--color-white);
  --color-text-accent:    var(--blue-500);    /* #0078ff */
  --color-text-muted:     var(--gray-500);    /* #99a1b1 */
  --color-text-dark:      var(--color-black);

  /* ── Semantic: Background ────────────── */
  --color-bg-default:  var(--color-white);
  --color-bg-body:     var(--gray-300);       /* #cbd1dc  — 랜딩페이지 전용 */
  --color-bg-section:  var(--gray-100);       /* #f2f3f8 */
  --color-bg-subtle:   var(--blue-100);       /* #d6ebff */
  --color-bg-dark:     var(--gray-800);       /* #354153 */
  --color-bg-accent:   var(--blue-500);       /* #0078ff */
  --color-bg-white:    var(--color-white);
  --color-overlay:     rgba(74, 86, 103, 0.9); /* Gray-700 @ 90% */

  /* ── Semantic: Border ────────────────── */
  --color-border:        var(--gray-200);     /* #e5e8ef */
  --color-border-strong: var(--gray-400);     /* #b4bbcb */

  /* ── Semantic: Status ───────────────── */
  --color-negative:            var(--red-600);     /* #f51441 — 부정·금지·경고 강조 */
  --color-status-info-bg:      var(--blue-50);     /* #ebf5ff — Callout Info 배경 */
  --color-status-info:         var(--blue-500);    /* #0078ff — Callout Info 아이콘 */
  --color-status-positive-bg:  var(--green-50);    /* #e6fef0 — Callout Success 배경 */
  --color-status-positive:     var(--green-500);   /* #04ca81 — Callout Success 아이콘 */
  --color-status-caution-bg:   var(--orange-50);   /* #fff8e6 — Callout Caution 배경 */
  --color-status-caution:      var(--orange-500);  /* #ff8800 — Callout Caution 아이콘 */
  --color-status-negative-bg:  var(--red-50);      /* #fff0f3 — Callout Warning 배경 */

  /* ── Semantic: Interactive ───────────── */
  --color-primary:          var(--blue-500);  /* #0078ff */
  --color-button-secondary: var(--gray-600);  /* #697383 */
  --color-bullet-default:   var(--gray-500);  /* #99a1b1 */

  /* ── Typography ──────────────────────── */
  --font-pretendard:     'Pretendard';
  --font-ibm-plex:       'IBM Plex Sans KR';

  --text-display-xxl-size:   36px;
  --text-display-xxl-weight: 700;
  --text-display-xxl-lh:     140%;

  --text-display-hero-size:  40px; /* hero h1 전용 예외 크기 */

  --text-display-xl-size:   28px;
  --text-display-xl-weight: 700;
  --text-display-xl-lh:     128%;

  --text-display-l-size:    24px;
  --text-display-l-weight:  700;
  --text-display-l-lh:      128%;

  --text-heading-l-size:    20px;
  --text-heading-l-weight:  600;
  --text-heading-l-lh:      140%;

  --text-heading-m-size:    18px;
  --text-heading-m-weight:  600;
  --text-heading-m-lh:      140%;

  --text-heading-s-size:    16px;
  --text-heading-s-weight:  600;
  --text-heading-s-lh:      140%;

  --text-body-l-size:       16px;
  --text-body-l-weight:     400;
  --text-body-l-lh:         160%;

  --text-body-m-size:       14px;
  --text-body-m-weight:     400;
  --text-body-m-lh:         160%;

  --text-body-s-size:       12px;
  --text-body-s-weight:     400;
  --text-body-s-lh:         160%;

  --text-label-l-size:      14px;
  --text-label-l-weight:    500;
  --text-label-l-lh:        140%;

  --text-label-m-size:      12px;
  --text-label-m-weight:    500;
  --text-label-m-lh:        140%;

  --text-label-s-size:      10px;
  --text-label-s-weight:    500;
  --text-label-s-lh:        140%;

  --text-caption-m-size:    11px;
  --text-caption-m-weight:  400;
  --text-caption-m-lh:      140%;

  --text-caption-s-size:    10px;
  --text-caption-s-weight:  400;
  --text-caption-s-lh:      140%;

  /* ── Spacing ─────────────────────────── */
  --space-hairline:   2px;
  --space-xxs:        4px;
  --space-xs:         8px;
  --space-sm:         12px;
  --space-md:         16px;
  --space-lg:         20px;
  --space-xl:         24px;
  --space-xxl:        32px;
  --space-xxxl:       40px;
  --space-section-sm:       48px;
  --space-section:          64px;
  --space-section-lg:       80px;
  --space-floating-clearance: 180px; /* notice 하단 플로팅 버튼 겹침 방지 여백 */

  /* ── Radius ──────────────────────────── */
  --radius-4:    4px;
  --radius-8:    8px;
  --radius-12:   12px;
  --radius-16:   16px;
  --radius-full: 999px;
}

/* ── Explicit Dark Theme (data-theme="dark") ─────────────────────────────── */
/* OS 설정과 무관하게 특정 페이지·컴포넌트를 강제 다크로 만들 때 사용.         */
/* <html data-theme="dark"> 로 페이지 전체에 적용.                             */
/* @media (prefers-color-scheme: dark) 는 의도적으로 미사용 — 모든 페이지는    */
/* OS 다크모드와 무관하게 라이트 모드로 렌더링합니다.                           */
/* @media (prefers-color-scheme: dark) 와 동일 값 — 두 블록은 항상 동기화할 것 */
[data-theme="dark"] {
  /* ── Text ── */
  --color-text-primary:   #ffffff;
  --color-text-secondary: var(--gray-300);
  --color-text-disabled:  var(--gray-500);
  --color-text-inverse:   var(--gray-1000);
  --color-text-accent:    var(--blue-300);
  --color-text-muted:     var(--gray-600);
  --color-text-dark:      #ffffff;

  /* ── Background ── */
  --color-bg-default:  var(--gray-1000);
  --color-bg-body:     #0d111a;
  --color-bg-section:  #1e2a3a;
  --color-bg-subtle:   rgba(0, 120, 255, 0.18);
  --color-bg-dark:     var(--gray-600);
  --color-bg-white:    var(--gray-800);
  --color-overlay:     rgba(0, 0, 0, 0.85);

  /* ── Border ── */
  --color-border:        var(--gray-700);
  --color-border-strong: var(--gray-500);

  /* ── Status ── */
  --color-negative:         var(--red-600);

  /* ── Interactive ── */
  --color-button-secondary: var(--gray-800);
  --color-bullet-default:   var(--gray-700);
}