/* Newve Clinic — Design Tokens
 * Source: 한국어 사이트 디자인 추출 (docs/design-system-extracted.md)
 */

:root {
  /* ── Colors ──────────────────────────────────────────── */
  --newve-primary:        #bda363;  /* Gold — CTA, links, hover */
  --newve-primary-hover:  #a48a4d;  /* Gold darker (computed) */
  --newve-dark:           #121212;  /* Dark BG, dark buttons */
  --newve-text:           #212121;  /* Body text */
  --newve-bg-light:       #f6f5f2;  /* Section beige */
  --newve-bg-footer:      #1d1c19;  /* Near-black footer */
  --newve-white:          #ffffff;
  --newve-warning:        #d68c0c;
  --newve-gray-1:         #888888;
  --newve-gray-2:         #757575;
  --newve-gray-3:         #999999;
  --newve-gray-4:         #cccccc;

  --newve-overlay-header: rgba(0, 0, 0, 0.30);
  --newve-overlay-mobile: rgba(0, 0, 0, 0.25);
  --newve-overlay-form:   rgba(36, 36, 36, 0.70);

  /* ── Typography ──────────────────────────────────────── */
  --newve-font: 'Pretendard Variable', 'Pretendard',
                -apple-system, BlinkMacSystemFont, system-ui,
                Roboto, 'Helvetica Neue', 'Apple SD Gothic Neo', sans-serif;

  --newve-fs-small:   13px;
  --newve-fs-body:    16px;
  --newve-fs-regular: 17px;
  --newve-fs-h3:      22px;
  --newve-fs-h2:      32px;
  --newve-fs-h1:      44px;
  --newve-fs-display: 60px;

  --newve-fw-light:    300;
  --newve-fw-regular:  400;
  --newve-fw-medium:   500;
  --newve-fw-semibold: 600;
  --newve-fw-bold:     700;
  --newve-fw-extrabold:800;

  --newve-lh-tight:  1.2;
  --newve-lh-base:   1.6;

  /* ── Layout ──────────────────────────────────────────── */
  --newve-container:        1280px;
  --newve-pad-desktop:      15px;
  --newve-pad-mobile:       20px;
  --newve-side-space:       24px;
  --newve-section-py:       80px;
  --newve-section-py-mobile:48px;
  --newve-header-height:    128px;
  --newve-header-height-mobile: 64px;

  /* ── UI ──────────────────────────────────────────────── */
  --newve-radius:           0;
  --newve-radius-modal:     3px;
  --newve-radius-circle:    50%;
  --newve-shadow-modal:     0 5px 15px rgba(0, 0, 0, 0.2);
  --newve-shadow-card:      0 2px 8px rgba(0, 0, 0, 0.06);
  --newve-divider:          inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
  --newve-transition:       0.3s ease;
  --newve-transition-slow:  0.7s ease;

  /* ── Z-index ─────────────────────────────────────────── */
  --newve-z-header:   100;
  --newve-z-modal:    1000;
  --newve-z-overlay:  900;

  /* ═════════════════════════════════════════════════════════════════
   * Phase 2 — skinmdlab 정밀 매칭 토큰 (2026-05-13)
   * 위 토큰은 Phase 1 한국 1:1 페이지용. 새 영문 디자인은 아래 토큰 사용.
   * 충돌 시 새 토큰이 우선. 컴포넌트는 `.newve-…--v2` 또는 home 페이지에서만 적용.
   * 출처: docs/skinmdlab-design-extracted.md §🔧 정밀 추출 보강
   * ═════════════════════════════════════════════════════════════════ */

  /* ── v2 폰트 (Manrope = 영문 헤딩) ─────────────────────── */
  --newve-font-display: 'Manrope', 'Pretendard Variable', 'Pretendard',
                        -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --newve-font-body:    var(--newve-font);   /* Pretendard 유지 */

  /* ── v2 타이포 사이즈 (skinmdlab 실측 기반) ───────────────
   *  Hero h2 132px @1920 → clamp 로 모바일 56px 까지
   *  Hero h3 56px       → clamp 28~56
   *  Section heading 38~72px
   */
  --newve-fs-hero:       clamp(56px, 8vw, 132px);
  --newve-fs-hero-sub:   clamp(28px, 3.5vw, 56px);
  --newve-fs-display-v2: clamp(40px, 5vw, 72px);
  --newve-fs-section:    clamp(28px, 3vw, 48px);
  --newve-fs-eyebrow:    13px;
  --newve-fs-body-v2:    17px;

  /* ── v2 letter-spacing ─────────────────────────────────
   * skinmdlab: h2 +0.04em (영문 임팩트), 본문 -0.04em (한글 자간)
   */
  --newve-ls-hero:    0.04em;
  --newve-ls-heading: 0.008em;
  --newve-ls-body:    -0.04em;
  --newve-ls-eyebrow: 0.2em;

  /* ── v2 라인하이트 ─────────────────────────────────────── */
  --newve-lh-hero:    0.9;
  --newve-lh-heading: 1.1;
  --newve-lh-body-v2: 1.4;

  /* ── v2 컬러 (브랜드 톤 유지, 톤만 정제) ─────────────────
   *  skinmdlab 의 #0070DF 대신 우리는 골드 #bda363 유지.
   *  그레이 12단계는 skinmdlab 의 #000~#bbb 그대로 차용.
   */
  --newve-black-00: #000;
  --newve-black-01: #111;
  --newve-black-02: #222;
  --newve-black-03: #333;
  --newve-black-04: #444;
  --newve-black-05: #555;
  --newve-black-06: #666;
  --newve-black-07: #777;
  --newve-black-08: #888;
  --newve-black-09: #999;
  --newve-black-10: #aaa;
  --newve-black-11: #bbb;

  --newve-bg-soft:   #fafafa;   /* skinmdlab --gray-bg03 */
  --newve-bg-warm:   #f8f8f8;   /* skinmdlab --gray-bg02 */
  --newve-bg-cool:   #f5f7fa;   /* skinmdlab --gray-bg04 */

  --newve-border:        #ddd;  /* skinmdlab --border-color01 (E5E5E5 아님) */
  --newve-border-soft:   #eee;
  --newve-border-strong: #ccc;

  /* ── v2 라운드 (Phase 1 의 0 → 14 가 기본) ────────────── */
  --newve-radius-sm: 6px;
  --newve-radius-md: 14px;     /* 카드 표준 */
  --newve-radius-lg: 20px;     /* hero 미디어 */
  --newve-radius-xl: 30px;     /* 대형 버튼/캡슐 */
  --newve-radius-pill: 9999px;

  /* ── v2 섀도 (skinmdlab 3단계) ─────────────────────────── */
  --newve-shadow-sm: 0 0 20px rgba(0, 0, 0, 0.05);   /* --shadow-02 */
  --newve-shadow-md: 0 0 30px rgba(0, 0, 0, 0.10);   /* --shadow-01 */
  --newve-shadow-lg: 0 0 20px rgba(0, 0, 0, 0.15);   /* --shadow-03 */
  --newve-shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.12);

  /* ── v2 이징 (skinmdlab AOS = ease-out-back, 우리는 sober) ─
   *  ease-out-back 은 살짝 튀는 톤. 의료 사이트엔 too playful 이므로
   *  cubic-bezier 로 차분히 다듬되 토큰명만 일치시킴.
   */
  --newve-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --newve-ease-back:     cubic-bezier(0.34, 1.4, 0.64, 1);   /* skinmdlab back, 약화 */
  --newve-ease-smooth:   cubic-bezier(0.4, 0, 0.2, 1);
  --newve-duration-fast: 200ms;
  --newve-duration-base: 400ms;
  --newve-duration-slow: 1000ms;                              /* AOS 매칭 */

  /* ── v2 컨테이너 / 섹션 (skinmdlab 스케일) ─────────────── */
  --newve-container-narrow: 1080px;   /* skinmdlab 제품 카드 */
  --newve-container-base:   1280px;   /* 기존 유지 */
  --newve-container-wide:   1640px;   /* skinmdlab --w_1640 */
  --newve-section-py-v2:    120px;    /* 80 → 120 (plan §디자인방향) */
  --newve-hero-py:          63px;
  --newve-hero-pb:          96px;
  --newve-hero-mb:          80px;     /* skinmdlab 그대로 */

  /* ── v2 헤더 (sticky 단일행) ───────────────────────────── */
  --newve-header-h-v2:      80px;
  --newve-header-divider:   inset 0 -1px 0 0 var(--newve-border);

  /* ── v2 그라데이션 (skinmdlab) ─────────────────────────── */
  --newve-grad-top:    linear-gradient(180deg, rgba(221,221,221,1) 0%, rgba(255,255,255,0) 100%);
  --newve-grad-bottom: linear-gradient(0deg, #fff 26.55%, #f5f5f5 100%);
  --newve-grad-fade:   linear-gradient(180deg, rgba(245,245,245,1) 0%, rgba(255,255,255,0) 100%);
}

/* ── Breakpoint helpers (used as media queries in main.css) ─
 * Desktop:  min-width: 992px
 * Tablet:   min-width: 767px
 * Mobile:   max-width: 991px
 */