/* ============================================================================
   02-tokens.css — 딥퓨전AI 색·타이포·리듬 토큰 (@layer tokens)
   ----------------------------------------------------------------------------
   근거: extract/tokens-*.json 실측(파일에 Figma Variables 없음 — 전부 하드코딩 실측).
   설계폭 1920 · 컨테이너 1600(마진 160) · 섹션 py 120 · 헤더 94.
   유동 변환식: 시안값 V(1920 기준) → clamp(<모바일 하한>, calc(V/1920*100)vw, Vpx)
   ========================================================================== */
@layer tokens {
  :root {
    /* ── 글꼴 스택 — @font-face 는 assets/fonts/pretendard-subset/pretendard-subset.css ── */
    --df-font: 'Pretendard', Inter, 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif;

    /* ── 색 (tokens-main_01 · sub0201 · sub0301 실측, 근거 노드는 각 json) ── */
    --df-navy:       #132033;   /* 다크 섹션/푸터/헤더(sub) 배경 */
    --df-navy-2:     #223248;   /* 푸터 버튼 bg */
    --df-panel:      #212e42;   /* Solutions 좌측 스티키 메뉴 컨테이너 */
    --df-field:      #1c2b40;   /* Contact 입력 필드 bg */
    --df-field-bd:   #2d4059;   /* Contact 입력 필드 border */
    --df-cyan:       #28c6ff;   /* 다크 배경 액센트/프라이머리 버튼 */
    --df-blue:       #006cd2;   /* 라이트 배경 액센트 */
    --df-ink:        #222222;   /* 라이트 섹션 헤딩 */
    --df-dim:        #414e62;   /* 히어로 2색 헤딩의 꼬리(스크롤 채움 모션 단서) */
    --df-gray-f6:    #f6f6f6;   /* 라이트 회색 섹션 */
    --df-gray-ed:    #ededed;   /* 다크 섹션 위 라이트 버튼 */
    --df-white:      #ffffff;
    --df-line-w10:   rgba(255,255,255,0.1);
    --df-line-w20:   rgba(255,255,255,0.2);
    --df-line-k10:   rgba(0,0,0,0.1);
    --df-dim-20:     rgba(0,0,0,0.2);
    --df-dim-30:     rgba(0,0,0,0.3);
    --df-overlay-ind:rgba(19,32,51,0.9);

    /* 포커스 링 — 접근성 요구값. 시안에 상태 스펙 없음(확인요망) */
    --df-focus: #7cd8ff;

    /* 자리표시자 판 — 시안에 없는 우리 요소(자산 결손 표시용) 중립 회색 */
    --df-ph: #223041;

    /* ── 유동 골격 ── */
    --fl-max: 1600px;                       /* 컨테이너 1600 (마진 160) */
    --fl-gutter: clamp(20px, 4vw, 160px);
    --fl-content: min(var(--fl-max), 100% - var(--fl-gutter) * 2);

    /* ── 타이포 스케일 (V/1920*100 vw 손계산) ── */
    --fs-110: clamp(44px, 5.7292vw, 110px);  /* What We Do 초대형 */
    --fs-80:  clamp(36px, 4.1667vw, 80px);   /* 메인 히어로 */
    --fs-70:  clamp(34px, 3.6458vw, 70px);   /* 서브 히어로 (sub 페이지 공통 224px 타이틀 박스=70/1.6·2줄) */
    --fs-50:  clamp(28px, 2.6042vw, 50px);   /* 섹션 타이틀/푸터 CTA/스탯 수치 */
    --fs-40:  clamp(24px, 2.0833vw, 40px);   /* 호버 칼럼 타이틀 */
    --fs-30:  clamp(19px, 1.5625vw, 30px);
    --fs-24:  clamp(17px, 1.25vw, 24px);
    --fs-20:  clamp(15px, 1.0417vw, 20px);
    --fs-18:  clamp(15px, 0.9375vw, 18px);
    --fs-17:  clamp(15px, 0.8854vw, 17px);
    --fs-16:  clamp(15px, 0.8333vw, 16px);

    /* ── 간격 ── */
    --sp-120: clamp(64px, 6.25vw, 120px);   /* 섹션 py */
    --sp-100: clamp(48px, 5.2083vw, 100px);
    --sp-90:  clamp(28px, 4.6875vw, 90px);  /* GNB gap */
    --sp-60:  clamp(32px, 3.125vw, 60px);
    --sp-50:  clamp(24px, 2.6042vw, 50px);
    --sp-40:  clamp(20px, 2.0833vw, 40px);
    --sp-30:  clamp(16px, 1.5625vw, 30px);
    --sp-20:  clamp(12px, 1.0417vw, 20px);
    --sp-12:  clamp(8px, 0.625vw, 12px);

    --hd-h: clamp(64px, 4.8958vw, 94px);    /* 헤더 94 */
    --r-4: 4px; --r-6: 6px; --r-20: clamp(12px, 1.0417vw, 20px); --r-pill: 100px;

    /* 이징 (수상작 실측 표준 — 01-standards) */
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --dur-base: 0.34s;
  }
}