/* ============================================================
   신독 Design Tokens v1.2  (static/tokens.css)
   ------------------------------------------------------------
   기준: home.html의 라이트 테마가 사이트 전체의 공식 디자인이다.
   (다크 네이비 히어로 + 밝은 본문 — 2026-07-07 확정)

   (2026-07-10 중앙화 갱신) 이 파일은 그동안 사이트의 다른 32개 파일이
   진행한 폰트·색상 중앙화(static/fonts.css, static/colors.css)에서
   빠져 있었다 — 그 결과 about.html이 실제로는 옛날 폰트(Noto Sans KR/
   Noto Serif KR/IBM Plex Mono)와 옛날 Research 색(러스트 #a8331f/골드
   #8a6a2f)을 그대로 쓰고 있었다(눈에 잘 안 띄는 실제 버그였음). 지금
   이 파일이 값을 갖던 항목들은 전부 fonts.css/colors.css를 참조하도록
   바꿨다 — 이 파일 자체가 "3번째 독립된 소스"가 되는 걸 막기 위함.

   fonts.css/colors.css와 안 겹치는 항목(spacing 스케일, 타입 스케일,
   그림자 sm/md/lg, motion, layout 폭)은 이 파일이 계속 유일한 소스다.

   구성 원리:
   - 본문은 밝은 배경(#f8fafc) 위의 흰 카드. 신뢰감 있는 정보 사이트 톤.
   - "네이비 반전 블록"(히어로, FLOOR 카드, 카카오 밴드, 푸터)이 리듬을 만든다.
     이 반전 블록 안에서는 inv- 접두 토큰을 쓴다.
   - 액션/활성 상태는 네이비 파랑(--navy-mid #1d4ed8) 하나로 통일.

   사용 원칙:
   1) 새 페이지/컴포넌트는 반드시 이 변수만 사용한다. 하드코딩 금지.
   2) 실제 색상·반경·그림자(카드)·히어로 그라디언트 값을 바꾸고 싶으면
      이 파일이 아니라 /static/colors.css를 고칠 것 — 여기는 참조만 한다.
   3) INSIGHT(Research)는 같은 라이트 골격 위에 에디토리얼 확장 토큰
      (--seal, --brass)만 추가로 쓴다 — insight.css와 동일하게 이제
      네이비를 가리킨다(러스트/골드 원색 아님).

   (2026-07 정리) 이 파일의 .sd-* 컴포넌트 클래스(.sd-body/.sd-navbar/
   .sd-hero/.sd-btn/.sd-card/.sd-chip 등)는 유산 코드라 전부 삭제했다.
   유일한 실사용처였던 about.html의 .sd-body/.sd-hero-eyebrow는 about.html
   자체 <style>로 이관 완료. 이제 이 파일은 :root 디자인 토큰만 제공한다
   (about.html 등이 --sp-*/--fs-*/--w-*/--r-* 참조).
   ============================================================ */

:root {
  /* ── Color: 라이트 본문 — 전부 /static/colors.css 참조 ── */
  --bg: var(--c-bg, #f8fafc);
  --surface: var(--c-white, #ffffff);
  --surface2: var(--c-surface-tint-gray, #f1f5f9);   /* 중첩 표면 (입력창, 코드, 서브카드) */
  --line: var(--c-line, #e2e8f0);
  --border: var(--line);    /* (별칭) 구 다크 테마 코드 호환 */

  /* ── Color: 텍스트 ── */
  --text-hi: var(--c-text-hi, #0f172a);
  --text: var(--c-text-dark, #1e293b);
  --muted: var(--c-slate, #64748b);
  --slate: var(--muted);    /* (별칭) home.html 호환 */

  /* ── Color: 네이비 액션/브랜드 ── */
  --navy-deep: var(--c-navy-deep, #0f172a);
  --navy-mid: var(--c-navy-mid, #1d4ed8);
  --navy-soft: var(--c-navy-soft, #3b82f6);
  --accent: var(--navy-mid);      /* (별칭) */
  --accent-hi: var(--navy-soft);  /* (별칭) */
  --on-accent: var(--c-on-accent, #ffffff);

  /* ── Color: 네이비 반전 블록 내부 ── */
  --inv-bg: var(--navy-deep);
  --inv-bg-deeper: var(--c-navy-deepest, #0b1120);   /* 푸터 */
  --inv-text: var(--c-line, #e2e8f0);
  --inv-muted: var(--c-slate-on-dark, #94a3b8);
  --inv-accent: #93c5fd;          /* 반전 블록 안의 라벨/링크 — 사이트 다른 곳과 안 겹치는 고유색이라 유지 */
  --inv-line: rgba(255,255,255,.25);

  /* ── Color: 상태 ── */
  --ok: var(--c-ok, #16a34a);
  --warn: var(--c-warn, #d97706);
  --danger: var(--c-danger, #dc2626);
  /* (2026-07) 사이트 전역 카카오 CTA를 네이비로 통일하면서 이 두 토큰의
     유일한 사용처였던 .sd-btn-kakao가 제거됨 → 현재 미참조. 카카오 브랜드
     가이드상 노란색이 강제되는 요소(예: 카카오 로그인 버튼)를 나중에 추가할
     때를 위한 브랜드 레퍼런스로만 남겨둔다("변경 금지" 원주석 유지). */
  --kakao: #FEE500;
  --on-kakao: #191919;

  /* ── Color: INSIGHT 에디토리얼 확장 ── */
  /* (2026-07-10) insight.css와 동일하게 러스트/골드 원색을 폐기하고
     네이비를 가리키도록 통일 — Research만 다른 색 정체성을 갖던 문제의
     해소. insight.css의 :root 주석에 자세한 사유가 있다. */
  --seal: var(--accent);
  --brass: var(--accent-hi);

  /* ── Typography — 전부 /static/fonts.css 참조 ── */
  --font: var(--font-sans, 'Geist', 'Pretendard Variable', sans-serif);
  --font-body: var(--font-sans, 'Geist', 'Pretendard Variable', sans-serif);
  --font-display: var(--font-sans, 'Geist', 'Pretendard Variable', sans-serif);   /* Research 제목 — 예전엔 세리프였으나 사이트 전체 통일 시 폐기됨 */
  --font-mono: var(--font-mono-src, 'Geist Mono', 'Pretendard Variable', monospace);  /* eyebrow/메타/숫자 */
  --mono: var(--font-mono);           /* (별칭) home.html 호환 */

  /* 타입 스케일 — home.html 실측값 기준 (fonts.css/colors.css와 안 겹치는 영역) */
  --fs-hero: clamp(1.7rem, 4.5vw, 2.6rem);
  --fs-h1: clamp(1.4rem, 4vw, 1.9rem);
  --fs-h2: 1.35rem;         /* .sec-title */
  --fs-h3: 1.02rem;         /* 카드 제목 */
  --fs-body: .95rem;
  --fs-sm: .85rem;
  --fs-caption: .8rem;
  --fs-eyebrow: .74rem;
  --lh-tight: 1.3;
  --lh-body: 1.6;
  --lh-article: 1.85;       /* Research 본문 전용 */

  /* ── Spacing (4px 배수) — colors.css와 안 겹치는 영역, 계속 이 파일이 소스 ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-14: 56px; --sp-16: 64px; --sp-20: 80px;

  /* ── Radius ── */
  /* (2026-07-10) colors.css가 이미 사이트 20여 개 페이지의 다수 합의값
     (6/12/18)으로 --radius-sm/md/lg를 갖고 있다 — 이 파일만 따로
     10/12/14를 쓰던 걸 그쪽으로 맞췄다(about.html 카드 모서리가 아주
     미세하게 바뀔 수 있음). --r-pill은 겹치는 토큰이 없어 유지. */
  --r-sm: var(--radius-sm, 6px);
  --r-md: var(--radius-md, 12px);
  --r-lg: var(--radius-lg, 18px);
  --r-pill: 999px;          /* 칩 */

  /* ── Shadow ── */
  /* --shadow-sm/lg는 colors.css에 대응 토큰이 없어 유지. --shadow-md는
     카드용 범용 그림자(colors.css --shadow-card)와 달리 네이비 톤이
     들어간 hover 전용 그림자라 별개로 유지한다. */
  --shadow-sm: 0 1px 3px rgba(15,23,42,.06);
  --shadow-md: 0 4px 16px rgba(29,78,216,.10);
  --shadow-lg: 0 12px 40px rgba(15,23,42,.18);

  /* ── Motion (home.html 실측 .12s) ── */
  --t-fast: 120ms;
  --t-base: 150ms;
  --t-slow: 200ms;

  /* ── Layout ── */
  --w-content: 720px;
  --w-wide: 1040px;         /* home.html .wrap 표준 */
  --bp-mobile: 720px;       /* home.html 주 브레이크포인트 */
  --topbar-h: 52px;
}