/* ============================================================
   tokens.css — 태동그룹 웹 디자인 토큰
   근거: 세계 상위 사이트 60곳 실측(references/evidence.md)
   원칙: 화면마다 색·간격·크기를 새로 정하지 않는다. 여기 있는 것만 쓴다.
   ============================================================ */

:root {
  /* ── 타입 스케일 ────────────────────────────────────────────
     실측: 최상급 제품사이트 본문 중앙값 16px, h1은 본문의 3배.
     한글은 같은 크기라도 라틴보다 작아 보이므로 본문 하한을 16px로 잡는다.
     단계를 벗어난 크기는 쓰지 않는다(실측 상위 사이트는 5~15종만 사용). */
  --fs-caption: 0.8125rem;  /* 13px — 캡션·각주. 이보다 작게 쓰지 말 것 */
  --fs-sm:      0.875rem;   /* 14px — 보조 설명·라벨 */
  --fs-base:    1rem;       /* 16px — 본문 기준 */
  --fs-lg:      1.125rem;   /* 18px — 리드 문단 */
  --fs-xl:      1.375rem;   /* 22px — 소제목(h4) */
  --fs-2xl:     1.75rem;    /* 28px — h3 */
  --fs-3xl:     2.25rem;    /* 36px — h2 */
  --fs-4xl:     3rem;       /* 48px — h1 (실측 중앙값) */
  --fs-5xl:     4rem;       /* 64px — 히어로 대형 */

  /* 유동 크기 — 모바일에서 자동으로 줄어든다. 미디어쿼리로 크기를 재정의하지 말 것.
     h1 상한을 48px로 잡은 근거: 한국 상위 사이트 h1 중앙값 32px·p75 48px.
     서구 제품사이트는 63px을 쓰지만 한글로 그 크기를 쓰면 제목이 서너 줄로 흐른다. */
  --fs-h1: clamp(1.875rem, 1.15rem + 2.9vw, 3rem);
  --fs-h2: clamp(1.625rem, 1.2rem + 1.7vw, 2.25rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);

  /* ── 줄간격 ──────────────────────────────────────────────
     실측(토스·채널톡·29CM·쏘카·뱅크샐러드 한글 문단): 중앙값 1.5, 범위 1.5~1.56.
     짧은 마케팅 문단은 1.5~1.6, 길게 읽는 글은 1.75~1.8로 넓힌다. */
  --lh-tight: 1.1;    /* 대형 제목 전용 */
  --lh-heading: 1.3;  /* 소제목 */
  --lh-body: 1.6;     /* 한글 본문 — 실측 관행 1.5~1.6 */
  --lh-loose: 1.8;    /* 긴 글(회사소개·기사) — 읽는 시간이 길면 넓힌다 */

  /* ── 자간 ────────────────────────────────────────────────
     실측: 한국 상위 사이트는 0 아니면 -0.2~-0.5px(≈-0.01~-0.03em).
     양수 자간은 거의 안 쓴다 — 한글 어절이 흩어져 촌스러워진다. */
  --ls-display: -0.03em;  /* 40px 이상 */
  --ls-heading: -0.02em;  /* 24~40px */
  --ls-body: -0.01em;     /* 실측: 0~-0.01em. 양수는 절대 금지 */
  --ls-label: 0.04em;     /* 작은 대문자 라벨만 */

  /* ── 간격(8px 격자) ──────────────────────────────────────
     실측: 상위 사이트 gap 최빈값이 8·16·32·64. 그 격자를 따른다. */
  --sp-1: 0.25rem;   /* 4 */
  --sp-2: 0.5rem;    /* 8 */
  --sp-3: 0.75rem;   /* 12 */
  --sp-4: 1rem;      /* 16 */
  --sp-5: 1.5rem;    /* 24 */
  --sp-6: 2rem;      /* 32 */
  --sp-7: 3rem;      /* 48 */
  --sp-8: 4rem;      /* 64 */
  --sp-9: 6rem;      /* 96 */
  --sp-10: 8rem;     /* 128 */

  /* 섹션 사이 세로 리듬 — 화면이 커질수록 여백도 커져야 답답하지 않다 */
  --section-y: clamp(3.5rem, 2rem + 7vw, 8rem);

  /* ── 레이아웃 ────────────────────────────────────────────
     실측: 본문 컨테이너 중앙값 1200~1280px. 글 읽는 폭은 훨씬 좁아야 한다. */
  --w-page: 1200px;    /* 일반 콘텐츠 최대폭 */
  --w-wide: 1440px;    /* 넓은 섹션·갤러리 */
  --w-prose: 62ch;     /* 글 읽는 단 — 한글 기준 한 줄 35~45자 */
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* ── 색 ──────────────────────────────────────────────────
     중립 램프 1개 + 강조 1개 + 의미색. 이 이상 늘리지 않는다.
     순수 검정/흰색 글자는 쓰지 않는다(눈이 아프고 싸구려로 보인다). */
  --n-0:  #ffffff;
  --n-50: #f8fafc;
  --n-100:#f1f5f9;
  --n-200:#e6ebf2;
  --n-300:#cfd8e3;
  --n-400:#94a3b8;
  --n-500:#64748b;
  --n-600:#475569;
  --n-700:#334155;
  --n-800:#1e293b;
  --n-900:#0f172a;
  --n-950:#080d18;

  --accent:      #c8a96a;  /* 회사 골드 — 고객사는 브랜드색으로 교체 */
  --accent-deep: #b8975a;  /* 골드 버튼 hover — 남색 글씨 대비 유지 */
  --accent-ink:  #8a6f36;  /* 흰 배경 위 글자용 / 흰 글씨를 얹을 수 있는 어두운 골드(4.8:1) */
  --accent-soft: #f6efdf;  /* 배경용 옅은 버전 */

  --ok:   #0f8a5f;
  --warn: #b06a1f;
  --bad:  #c0392b;

  /* 의미 토큰 — 컴포넌트는 이것만 참조한다. 위 원색을 직접 쓰지 말 것 */
  --bg:        var(--n-0);
  --bg-subtle: var(--n-50);
  --surface:   var(--n-0);
  --border:    var(--n-200);
  --border-strong: var(--n-300);
  --text:      var(--n-900);
  --text-2:    var(--n-600);
  --text-3:    var(--n-500);
  --link:      var(--accent-ink);

  /* ── 모서리 ──────────────────────────────────────────────
     실측: 제품형 사이트는 4~12px. 과한 라운드는 신뢰감을 깎는다. */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  /* ── 그림자 ──────────────────────────────────────────────
     한 겹 그림자는 스티커처럼 보인다. 여러 겹을 얇게 쌓는다. */
  --sh-1: 0 1px 2px rgb(15 23 42 / .04), 0 1px 1px rgb(15 23 42 / .03);
  --sh-2: 0 2px 4px rgb(15 23 42 / .04), 0 4px 12px rgb(15 23 42 / .06);
  --sh-3: 0 4px 8px rgb(15 23 42 / .05), 0 12px 28px rgb(15 23 42 / .09);

  /* ── 모션 ────────────────────────────────────────────────
     실측: UI 반응은 0.15~0.3s, 큰 등장은 0.6~0.8s.
     원칙 = 움직이는 거리가 짧으면 짧게, 길면 길게. */
  --t-fast: 120ms;    /* 색·투명도 같은 즉각 반응 */
  --t-base: 200ms;    /* 버튼·카드 hover */
  --t-slow: 320ms;    /* 패널·드롭다운 */
  --t-enter: 560ms;   /* 스크롤 등장 */
  --e-out: cubic-bezier(.22, 1, .36, 1);      /* 등장 — 빠르게 나와 부드럽게 안착 */
  --e-in:  cubic-bezier(.4, 0, 1, 1);          /* 퇴장 */
  --e-inout: cubic-bezier(.65, 0, .35, 1);     /* 위치 이동 */

  /* ── 서체 ────────────────────────────────────────────────
     Pretendard = 한글·라틴·숫자가 한 벌로 어울리는 유일한 실용 선택.
     시스템 폰트만 쓰면 맑은고딕으로 떨어져 品이 확 낮아진다. */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-serif: "Nanum Myeongjo", "Apple SD Gothic Neo", serif;  /* 감성 프로젝트 제목용 */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/* 다크 화면 — 순수 검정 배경은 쓰지 않는다(대비가 너무 세서 눈이 아프다) */
:root[data-theme="dark"], .dark {
  --bg:        #0a1020;
  --bg-subtle: #05080f;
  --surface:   #0e1525;
  --border:    rgb(255 255 255 / .10);
  --border-strong: rgb(255 255 255 / .18);
  --text:      #eef1f8;
  --text-2:    #c3ccdd;
  --text-3:    #7a86a0;
  --link:      var(--accent);
  --sh-1: 0 1px 2px rgb(0 0 0 / .4);
  --sh-2: 0 2px 6px rgb(0 0 0 / .45), 0 8px 20px rgb(0 0 0 / .35);
  --sh-3: 0 8px 24px rgb(0 0 0 / .5), 0 20px 48px rgb(0 0 0 / .4);
}