/* =====================================================================
   design-tokens.css  — NOEL GLOBAL DESIGN SYSTEM v3
   이 파일만이 색상·타이포·스페이싱·레이디우스 값을 정의한다.
   다른 CSS 파일에서 임의 px 값을 만들지 않는다.
   ===================================================================== */
:root {

  /* ── Color Palette ─────────────────────────────────────── */
  --clr-bg:          #F7F5F0;   /* Warm Ivory — 기본 배경 */
  --clr-bg-2:        #EDEBE6;   /* 섹션 교차 배경 */
  --clr-bg-3:        #E2DFD9;   /* 카드·보조 */
  --clr-dark:        #171717;   /* Deep Charcoal — 다크 배경 */
  --clr-dark-2:      #1F1F1F;
  --clr-dark-3:      #2B2B2B;

  --clr-ink:         #171717;   /* 기본 텍스트 */
  --clr-ink-2:       #3A3A3A;   /* 보조 텍스트 */
  --clr-ink-3:       #767676;   /* 흐린 텍스트 (최소 4.5:1 대비) */
  --clr-ink-inv:     #F7F5F0;   /* 다크 배경 위 */
  --clr-ink-inv-2:   rgba(247,245,240,.62);

  --clr-gold:        #B49A70;   /* Champagne Gold — 액센트 */
  --clr-gold-dark:   #967E56;
  --clr-gold-light:  #CBB898;
  --clr-gold-wash:   rgba(180,154,112,.09);

  --clr-line:        #D4D1CB;
  --clr-line-2:      #C2BEB7;
  --clr-line-dark:   rgba(247,245,240,.11);

  --clr-vessel:      #B5514A;   /* 임상 그래픽 — 혈관 */
  --clr-pigment:     #7E5C3A;   /* 임상 그래픽 — 색소 */

  /* ── Typography Scale ──────────────────────────────────── */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  /* 고정 스케일 — clamp(mobile, fluid, desktop) */
  --fs-hero-h1:  clamp(44px, 5.6vw,  72px);  /* Hero H1   */
  --fs-page-h1:  clamp(36px, 4.2vw,  52px);  /* Page H1   */
  --fs-h2:       clamp(28px, 3.0vw,  40px);  /* Section H2 */
  --fs-h3:       clamp(20px, 1.9vw,  27px);  /* H3        */
  --fs-h4:       clamp(17px, 1.3vw,  20px);  /* H4        */
  --fs-lead:     clamp(17px, 1.4vw,  19px);  /* Lead text */
  --fs-body:     17px;                        /* Body — 고정 */
  --fs-caption:  14px;                        /* Caption   */
  --fs-eyebrow:  12px;                        /* Eyebrow   */
  --fs-label:    11px;                        /* Micro label */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;

  --ls-tight:  -0.04em;   /* 제목 자간 */
  --ls-normal: -0.01em;   /* 본문 자간 */
  --ls-wide:    0.18em;   /* Eyebrow */

  --lh-tight:  1.10;
  --lh-snug:   1.28;
  --lh-normal: 1.60;
  --lh-loose:  1.80;

  /* ── Spacing Scale ─────────────────────────────────────── */
  --sp-2:    2px;
  --sp-4:    4px;
  --sp-6:    6px;
  --sp-8:    8px;
  --sp-10:  10px;
  --sp-14:  14px;
  --sp-18:  18px;
  --sp-12:  12px;
  --sp-16:  16px;
  --sp-20:  20px;
  --sp-24:  24px;
  --sp-28:  28px;
  --sp-32:  32px;
  --sp-36:  36px;
  --sp-40:  40px;
  --sp-48:  48px;
  --sp-56:  56px;
  --sp-64:  64px;
  --sp-80:  80px;
  --sp-96:  96px;
  --sp-120:120px;
  --sp-150:150px;

  /* Section vertical padding */
  --sec-py:         clamp(72px, 9vw, 120px);   /* 일반 */
  --sec-py-lg:      clamp(96px,12vw, 150px);   /* 강조 */
  --sec-py-sm:      clamp(48px, 6vw,  90px);   /* 컴팩트 */

  /* ── Grid / Container ─────────────────────────────────── */
  --w-full:    1400px;   /* 최대 컨테이너 */
  --w-content: 1200px;   /* 일반 콘텐츠 */
  --w-read:     900px;   /* 본문 가독 */
  --pad-x:    clamp(20px, 4vw, 60px);   /* 좌우 여백 */
  --gap:      clamp(16px, 2vw, 28px);   /* 그리드 gap */

  /* ── Border Radius ─────────────────────────────────────── */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-full:9999px;

  /* ── Shadow ────────────────────────────────────────────── */
  --shadow-sm:  0 4px 16px -4px rgba(23,23,23,.10);
  --shadow-md:  0 12px 36px -8px rgba(23,23,23,.13);
  --shadow-lg:  0 24px 60px -16px rgba(23,23,23,.16);

  /* ── Motion ────────────────────────────────────────────── */
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-in:   cubic-bezier(.7,0,.84,0);
  --ease:      cubic-bezier(.4,0,.2,1);
  --dur-fast:  .18s;
  --dur:       .32s;
  --dur-slow:  .65s;

  /* ── Header ────────────────────────────────────────────── */
  --header-h: 68px;
}

@media (max-width: 1024px) {
  :root { --header-h: 60px; }
}