/* ============================================================
   tokens.css — 3단 구조
   1단: 원시값 (raw)   — 이름에 실제 값이 드러남, 직접 참조 금지
   2단: 역할명 (role)  — 컴포넌트가 참조하는 유일한 레이어
   3단: 컴포넌트       — style.css 쪽에서 2단 역할명만 참조

   웹폰트 — Inter(디스플레이/본문), JetBrains Mono(메타데이터 라벨).
   둘 다 SIL Open Font License 1.1 (무료, 상업 이용 가능, 자체 호스팅 가능).
   라이선스 원문: fonts/OFL-Inter.txt, fonts/OFL-JetBrainsMono.txt
   CDN 링크 대신 site/fonts/에 라틴 서브셋 woff2로 자체 호스팅한다.
   ============================================================ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Inter-Regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 대형 타이포(SOMYUNG) 전용 굵기. index.html에서 이 파일만 preload한다 */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/Inter-ExtraBold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/JetBrainsMono-Regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/JetBrainsMono-Bold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- 1단: 원시값 ---------- */

  /* 무채색 스케일 (거의 검정 → 오프화이트, 순수 #000/#fff 없음) */
  --black-950: #0a0a0b;   /* 표면 */
  --black-900: #24242a;   /* 표면보다 한 단계 밝은 무채색 — 히어로 대형 타이포용.
                              #141416(거의 안 보임) → #24242a로 대비 상향 */
  --gray-700: #4a4a4a;    /* 낮은 대비 보조선, 구분선 */
  --gray-500: #8a8a86;    /* 뮤트 텍스트 (메타데이터, 보조 라벨) */
  --white-100: #f2f0eb;   /* 오프화이트 — 순수 #fff 대신 쓰는 기본 텍스트색 */

  /* 히어로 배경 타이포 전용 유채색. #3a3a42(무채색 후보)와 상대휘도를
     맞춘 딥그린 — 명명 규칙은 기존 무채색 스케일과 동일하게
     {색상familia}-{명도 단계} 형식을 따랐다({black|gray|white}-NNN 패턴을
     그대로 이어 green-900으로 명명). 이 값 자체는 여기서만 선언하고,
     실제 참조는 아래 2단 --hero-name-color 토큰 하나로 제한한다. */
  --green-900: #144428;

  /* 강조색 원시값 — 아직 미확정. 임시로 오프화이트를 그대로 참조 */
  --accent-tbd: var(--white-100);

  /* 타이포 원시값 — 폰트 2종 이내: 디스플레이 1종 + 모노 1종.
     웹폰트 로드 실패/차단 시를 대비해 시스템 폰트로 폴백한다 */
  --font-raw-display: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-raw-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;

  /* 간격 원시값 */
  --space-raw-1: 0.5rem;
  --space-raw-2: 1rem;
  --space-raw-3: 1.5rem;
  --space-raw-4: 2rem;
  --space-raw-5: 3rem;
  --space-raw-6: 4.5rem;

  /* ---------- 2단: 역할명 (컴포넌트는 이 레이어만 참조) ---------- */

  --surface: var(--black-950);
  --surface-raised: var(--black-900);

  /* 히어로 대형 타이포(SOMYUNG/KANG) 전용 색. 다른 컴포넌트는 이
     토큰을 참조하지 않는다 — 버튼·링크·본문 텍스트는 계속
     --text-primary/--accent/--surface-raised 등 기존 무채색 토큰을 쓴다. */
  --hero-name-color: var(--green-900);

  --text-primary: var(--white-100);
  --text-muted: var(--gray-500);
  --border-subtle: var(--gray-700);

  /* 강조색 — 아직 미확정. 색이 정해지면 이 한 줄만 바꾸면 된다 */
  --accent: var(--accent-tbd);

  --font-display: var(--font-raw-display);
  --font-mono: var(--font-raw-mono);

  --space-xs: var(--space-raw-1);
  --space-sm: var(--space-raw-2);
  --space-md: var(--space-raw-3);
  --space-lg: var(--space-raw-4);
  --space-xl: var(--space-raw-5);
  --space-2xl: var(--space-raw-6);
}