/* ============================================================
   tokens.css — 디자인 토큰 (design.md 시스템 구현)
   인디고 #2B3990 + 골드 #E5D85C · 화이트톤 · 그라데이션 페이드
   ============================================================ */

:root {
  /* ---------- Brand & Accent ---------- */
  --c-primary:          #2B3990;   /* 인디고 — 모든 인터랙티브 요소 */
  --c-primary-focus:    #3949AB;   /* 포커스 링 */
  --c-primary-wash:     #EAEBF5;   /* 옅은 인디고 — 선택/활성 배경 */
  --c-primary-dark:     #232F78;   /* 프레스/딥 */
  --c-secondary:        #E5D85C;   /* 골드 — 스파크 액센트 (채움 전용) */
  --c-secondary-strong: #C9B83A;   /* 진한 골드 — 흰 배경 위 마크/라인 */
  --c-secondary-wash:   #FBF8E3;   /* 옅은 골드 — 하이라이트 배경 */

  /* ---------- Surface (white-tone) ---------- */
  --c-canvas:  #ffffff;
  --c-smoke:   #f5f5f5;            /* whitesmoke — 교차 섹션 */
  --c-mist:    #ececec;            /* 가장 깊은 화이트톤 */
  --c-pearl:   #fafafa;            /* 고스트 버튼 채움 */

  /* ---------- Text ---------- */
  --c-ink:        #1d1d1f;         /* 헤드라인·본문 */
  --c-ink-soft:   #6e6e73;         /* 보조 카피·서브헤드 */
  --c-ink-muted:  #7a7a7a;         /* 비활성·미세 법적고지 */
  --c-on-dark:    #ffffff;         /* 인디고/사진 위 텍스트 */

  /* ---------- Hairlines ---------- */
  --c-hairline: #e0e0e0;
  --c-divider:  #f0f0f0;
  --c-seam:     rgba(0, 0, 0, 0.06);

  /* ---------- Gradients (white-tone, structural) ---------- */
  --g-section:      linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
  --g-section-rev:  linear-gradient(180deg, #f5f5f5 0%, #ffffff 100%);
  --g-section-deep: linear-gradient(180deg, #ffffff 0%, #ececec 100%);
  --g-hero:         radial-gradient(ellipse 130% 90% at 50% 0%, #ffffff 0%, #f5f5f5 78%);

  /* ---------- Typography ---------- */
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
               system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

  /* design.md 스케일 — 한글 대응 fluid */
  --fs-hero:    clamp(2.25rem, 1.40rem + 3.6vw, 3.5rem);    /* 36 → 56 */
  --fs-display: clamp(1.75rem, 1.25rem + 2.1vw, 2.5rem);    /* 28 → 40 */
  --fs-section: clamp(1.5rem,  1.20rem + 1.3vw, 2.125rem);  /* 24 → 34 */
  --fs-lead:    clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem); /* 18 → 22 */
  --fs-tagline: 1.3125rem;   /* 21 */
  --fs-body:    1.0625rem;   /* 17 — design.md 본문 규격 */
  --fs-sm:      0.9375rem;   /* 15 */
  --fs-caption: 0.875rem;    /* 14 */
  --fs-fine:    0.75rem;     /* 12 */

  --fw-light: 300;
  --fw-reg:   400;
  --fw-semi:  600;           /* 헤드라인 — 700 아님 */
  --fw-bold:  700;

  --lh-tight: 1.14;          /* 디스플레이 */
  --lh-snug:  1.35;
  --lh-base:  1.72;          /* 한글 본문 — 넉넉한 행간 */
  --tracking-tight: -0.022em;
  --tracking-snug:  -0.012em;

  /* ---------- Spacing (8px base) ---------- */
  --sp-2: 2px;   --sp-4: 4px;   --sp-8: 8px;   --sp-12: 12px;
  --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-32: 32px;
  --sp-40: 40px; --sp-48: 48px; --sp-64: 64px; --sp-80: 80px;
  --sp-section: clamp(56px, 6.5vw, 96px);   /* 섹션 상하 패딩 */

  /* ---------- Radius ---------- */
  --r-xs: 5px;  --r-sm: 8px;  --r-md: 11px;  --r-lg: 18px;
  --r-pill: 9999px;  --r-full: 50%;

  /* ---------- Elevation ---------- */
  --shadow-photo: 0 5px 30px 3px rgba(0, 0, 0, 0.22);   /* 사진 전용 */
  --shadow-soft:  0 6px 22px rgba(43, 57, 144, 0.07);   /* 카드 hover — whisper */
  --shadow-nav:   0 1px 0 var(--c-seam), 0 4px 18px rgba(0, 0, 0, 0.05);

  /* ---------- Layout ---------- */
  --container:        1200px;
  --container-narrow: 980px;
  --container-pad:    clamp(20px, 4vw, 40px);
  --nav-h: 64px;

  /* ---------- Motion ---------- */
  --t-fast: 150ms ease;
  --t-base: 250ms ease;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---------- z-index ---------- */
  --z-header: 100;
  --z-menu:   200;
  --z-top:    300;
}