/* ==========================================================================
   tokens.css — 디자인 토큰 (컬러 · 타이포 · 스페이싱 · 브레이크포인트)
   변수 정의만 둔다. 셀렉터 스타일은 넣지 않는다.
   ========================================================================== */

:root {
  /* ---------- Color (CLAUDE.md 디자인 시스템) ---------- */
  --space: #060D1A;  /* 최심부 배경 */
  --navy:  #0E2148;  /* 섹션 배경, 로고 딥네이비 */
  --blue:  #1B6FD0;  /* 주 강조, 로고 스워시 */
  --cyan:  #5AC8FA;  /* 포인트: 링크·데이터·궤도선 */
  --paper: #F4F6F8;  /* 라이트 섹션 */
  --ink:   #0A0F18;

  /* 텍스트 보조색 (본문 대비 4.5:1 이상 확인) */
  --text-muted:          #A9BAD4;  /* 다크 배경 보조 — navy 8.0:1 */
  --text-subtle:         #7E93B4;  /* 다크 배경 캡션 — navy 5.0:1, space 6.2:1 */
  --text-muted-on-light: #3E4B60;  /* 라이트 배경 보조 — paper 8.1:1 */

  /* 섹션 내부 데이터 선 (섹션 사이 구분선에는 쓰지 않는다) */
  --line-on-dark:  rgba(244, 246, 248, 0.14);
  --line-on-light: rgba(10, 15, 24, 0.18);

  /* ---------- Typography: family ---------- */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  /* 헤드라인(h1–h4)·Home 영문 소제목·큰 흐름 도식. 굵기 400 이상만 있음 */
  --font-display: "Wanted Sans Variable", "Wanted Sans", var(--font-sans);
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- Typography: size ----------
     rem 기준(1rem = 16px). 사용자 브라우저 글꼴 크기 설정을 존중한다. */
  --fs-xs:      0.75rem;                                 /* 12px  라벨·인덱스 */
  --fs-sm:      0.875rem;                                /* 14px */
  --fs-base:    1rem;                                    /* 16px  본문 */
  --fs-md:      1.125rem;                                /* 18px */
  --fs-lg:      clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);  /* 20–24px */
  --fs-xl:      clamp(1.5rem, 1.2rem + 1.2vw, 2rem);     /* 24–32px */
  --fs-2xl:     clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); /* 28–44px */
  --fs-display: clamp(2rem, 5vw, 4.25rem);               /* 32–68px  헤드라인 = clamp(32px, 5vw, 68px) */

  /* ---------- Typography: weight ---------- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------- Typography: line-height ---------- */
  --lh-tight: 1.15;  /* 헤드라인 */
  --lh-snug:  1.3;
  --lh-body:  1.65;  /* 국문 본문 */

  /* ---------- Typography: letter-spacing ---------- */
  --ls-tight: -0.02em;  /* 헤드라인 자간 -2% */
  --ls-label: 0.06em;   /* 모노 라벨·인덱스 */

  /* ---------- Spacing (4px 단위) ----------
     접두어 --sp- 사용: --space 는 컬러 토큰이므로 혼동을 피한다. */
  --sp-1:  0.25rem;  /*   4px */
  --sp-2:  0.5rem;   /*   8px */
  --sp-3:  0.75rem;  /*  12px */
  --sp-4:  1rem;     /*  16px */
  --sp-5:  1.5rem;   /*  24px */
  --sp-6:  2rem;     /*  32px */
  --sp-7:  3rem;     /*  48px */
  --sp-8:  4rem;     /*  64px */
  --sp-9:  6rem;     /*  96px */
  --sp-10: 8rem;     /* 128px */

  --gutter:        clamp(1rem, 4vw, 2.5rem);  /* 좌우 여백 16–40px */
  --section-y:     clamp(4rem, 10vw, 8rem);   /* 섹션 상하 여백 64–128px */
  --container-max: 80rem;                     /* 1280px */
  --header-h:      72px;                      /* 고정 헤더 높이 · sticky 오프셋 */

  /* ---------- Breakpoints ----------
     CSS 변수는 @media 조건에서 동작하지 않는다. JS 참조·문서화 용도이며,
     미디어 쿼리에는 같은 값을 직접 쓴다 (모바일 우선, min-width).
       @media (min-width: 640px)  { ... }
       @media (min-width: 1024px) { ... }
       @media (min-width: 1280px) { ... } */
  --bp-sm: 640px;
  --bp-md: 1024px;
  --bp-lg: 1280px;
}