/* =============================================================
   tokens.css  —  디자인 "잠금" 파일
   -------------------------------------------------------------
   ⚠️ 이 파일의 변수만 사용해서 색/폰트/간격을 정합니다.
   ⚠️ 다른 css 파일에서 색상값(#ffffff 등)을 직접 쓰지 마세요.
   ⚠️ 색을 바꾸고 싶으면 "여기 값만" 바꾸면 사이트 전체가 바뀝니다.
   ============================================================= */

:root {
  /* ---- 배경 (밝은 테마) ---- */
  --bg:          #FFFFFF;   /* 페이지 기본 배경 (흰색) */
  --bg-elev:     #F5F5F5;   /* 카드/박스 배경 */
  --bg-elev-2:   #EBEBEB;   /* 한 단계 더 어두운 박스 */
  --bg-light:    #EFF6FF;   /* 라이트 섹션 배경 (about 등) — 파란빛 */
  --text-dark:   #0A0A0A;   /* 라이트 배경 위 검정 글자 */
  --text-dark-sub: rgba(10,10,10,0.65); /* 라이트 배경 위 보조 글자 */

  /* ---- 글자색 ---- */
  --text:        #0A0A0A;   /* 기본 검정 글자 */
  --text-muted:  #6B6B6B;   /* 설명/보조 글자 */
  --text-dim:    #9A9A9A;   /* 가장 흐린 글자 */

  /* ---- 포인트 컬러 (진한 블루) ----
     브랜드 색을 바꾸고 싶으면 아래 --accent 두 줄만 바꾸세요. */
  --accent:      #1D4ED8;   /* 메인 포인트색 (딥 블루) */
  --accent-2:    #2563EB;   /* 호버(마우스 올렸을 때) */
  --on-accent:   #FFFFFF;   /* 블루 버튼 위 글자색 */

  /* ---- 선/경계 ---- */
  --border:        rgba(0,0,0,0.1);
  --border-strong: rgba(0,0,0,0.2);

  /* ---- 반투명 오버레이(사진 위 글자 가독성용) ---- */
  --scrim:       rgba(10,10,10,0.55);
  --scrim-strong:rgba(10,10,10,0.78);

  /* ---- 플레이스홀더 배경색 ---- */
  --ph-warm-a:   #EFF6FF;   /* 라이트 블루 그라데이션 시작 */
  --ph-warm-b:   #DBEAFE;   /* 라이트 블루 그라데이션 끝 */

  /* ---- 레이아웃 폭/여백 ---- */
  --max-w:     1200px;                 /* 콘텐츠 최대 폭 */
  --gutter:    clamp(20px, 5vw, 64px); /* 좌우 안쪽 여백 */
  --section-y: clamp(72px, 11vh, 160px);/* 섹션 위아래 여백 */

  /* ---- 모서리 둥글기 ---- */
  --radius:      16px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  /* ---- 폰트 ----
     Pretendard = 한글, Montserrat = 영문/숫자 라벨 */
  --font-kr: 'Pretendard', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-en: 'Montserrat', var(--font-kr);

  /* ---- 글자 크기 (화면 크기에 따라 자동 조절) ---- */
  --fs-hero:    clamp(2.6rem, 6vw, 5rem);   /* 히어로 대제목 */
  --fs-h2:      clamp(1.9rem, 4vw, 3.2rem); /* 섹션 제목 */
  --fs-h3:      clamp(1.2rem, 2vw, 1.6rem); /* 카드 제목 */
  --fs-body:    clamp(0.95rem, 1.1vw, 1.075rem);
  --fs-label:   0.8rem;                     /* 영문 작은 라벨 */

  /* ---- 모션 ---- */
  --ease:     cubic-bezier(.22,.61,.36,1);
  --dur:      .6s;
  --shadow:   0 8px 32px rgba(0,0,0,.10);

  /* ---- 고정 헤더 높이 ---- */
  --header-h: 76px;
}