/* ==========================================================================
   Design Tokens — ls-est.com 마이그레이션 3-1
   2단계 최종 확정본 Color System / Typography 값을 그대로 적용.
   임의의 색상/폰트 크기를 추가하지 않음.
   ========================================================================== */

:root {
  /* Color System (2단계 최종 확정) */
  --color-primary: #0B2545;
  --color-secondary: #13315C;
  --color-accent: #0E9F8B; /* Teal, 제한적 사용 */
  --color-background: #FFFFFF;
  --color-section-bg: #F5F7FA;
  --color-text-primary: #101828;
  --color-text-secondary: #5B6472;
  --color-border: #E3E7ED;

  /* Typography */
  --font-family-base: 'Pretendard', 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;

  /* Typography Scale — Desktop 기본값 */
  --fs-hero: 52px;
  --fs-h1: 38px;
  --fs-h2: 30px;
  --fs-h3: 21px;
  --fs-body: 16px;
  --fs-small: 13px;
  --fs-button: 16px;

  /* Layout */
  --container-max-width: 1240px;
  --header-height: 76px;
  --radius-sm: 4px;
  --radius-md: 8px;

  /* Motion Tokens — 3-6 단계. 아래 값은 사이트 전체에서 일관되게 사용하며,
     애니메이션마다 임의로 다른 duration을 새로 만들지 않는다. */
  --motion-fast: 180ms;    /* hover/focus 등 즉각적인 미세 반응 */
  --motion-normal: 300ms;  /* scroll reveal, 카드 등장 */
  --motion-slow: 550ms;    /* 드물게 사용하는 더 느린 전환(모바일 드로어 등) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --stagger-step: 80ms;    /* 카드/리스트 순차 등장 간 간격 */
  --reveal-distance: 16px; /* scroll reveal 기본 이동량(12~24px 범위 내) */
}

/* Typography Scale — Mobile (Tablet/Mobile 공통 축소값) */
@media (max-width: 768px) {
  :root {
    --fs-hero: 32px;
    --fs-h1: 27px;
    --fs-h2: 23px;
    --fs-h3: 18px;
    --fs-body: 15px;
    --fs-small: 13px;
    --fs-button: 15px;
    --header-height: 64px;
  }
}