/* =========================================================
   3단계 디자인 — 디자인 토큰 (CSS Custom Properties)
   브랜드 팔레트 / 타이포 / 간격 / 라운드 / 그림자 / 트랜지션
   - 활기·디지털형 방향 (라이트 시안 메인)
   - 5단계 반응형에서 미디어쿼리로 토큰값 재정의 예정
   ========================================================= */

:root {
  /* ───────────────────────────────────────────────────────
     컬러 ─ 로고 기반 팔레트
     ─────────────────────────────────────────────────────── */
  /* Navy — 신뢰의 다크 베이스 (로고 의사 모자·청진기·한글 메인) */
  --color-navy:        #0B2340;
  --color-navy-700:    #15315B;
  --color-navy-500:    #1E3A5F;

  /* Cyan — 활기·디지털 액센트 (로고 화살표·DOCTOR TRAFFIC) */
  --color-cyan:        #22D3EE;   /* 메인 액센트 (밝고 활기) */
  --color-cyan-600:    #06B6D4;   /* 호버·강조 */
  --color-cyan-100:    #CFFAFE;   /* 부드러운 배경·하이라이트 */

  /* 텍스트 / 중립 */
  --color-text:        #1F2937;
  --color-text-muted:  #6B7280;
  --color-text-faint:  #9CA3AF;

  /* 배경 / 보더 */
  --color-white:       #FFFFFF;
  --color-bg:          #F9FAFB;
  --color-bg-soft:     #F3F4F6;
  --color-border:      #E5E7EB;
  --color-border-soft: #F0F1F4;

  /* 시맨틱 (필요 시 사용) */
  --color-success:     #10B981;
  --color-warning:     #F59E0B;
  --color-danger:      #EF4444;

  /* ───────────────────────────────────────────────────────
     타이포그래피
     ─────────────────────────────────────────────────────── */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont,
               system-ui, 'Segoe UI', Roboto, 'Apple SD Gothic Neo',
               'Noto Sans KR', sans-serif;

  /* 사이즈 스케일 (1.25 비율) */
  --text-xs:   14px;
  --text-sm:   16px;
  --text-base: 18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;

  /* 두께 */
  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* 줄 간격 */
  --line-tight: 1.3;
  --line-base:  1.6;
  --line-loose: 1.8;

  /* ───────────────────────────────────────────────────────
     간격 ─ 4px 기반 스케일
     ─────────────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ───────────────────────────────────────────────────────
     라운드 / 그림자 / 보더
     ─────────────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-pill: 9999px;

  --shadow-sm: 0 1px 2px  rgba(11, 35, 64, 0.06);
  --shadow-md: 0 4px 12px rgba(11, 35, 64, 0.08);
  --shadow-lg: 0 12px 32px rgba(11, 35, 64, 0.12);

  --border-thin: 1px solid var(--color-border);

  /* ───────────────────────────────────────────────────────
     트랜지션 (6단계 애니메이션 대비, 우선 호버용 기본값만)
     ─────────────────────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ───────────────────────────────────────────────────────
     레이아웃
     ─────────────────────────────────────────────────────── */
  --container-max: 1200px;
  --header-height: 88px;       /* 로고 56 + padding 16*2 */
  --z-header:     10;
  --z-floating:    5;
  --z-skip-link: 100;
}