/* ═══════════════════════════════════════════════════════════
   ⭐ tokens.css — SINABRO · 운영자 GRAY
   컨셉: "여명과 성좌 (Gray · Dawn & Constellations)"
   흑연빛 밤 위에 달빛 은색, 지평선엔 킬리만자로의 새벽(호박빛).
   케냐의 가상도시가 조금씩(시나브로) 밝아오는 밤—새벽의 톤.
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── 색 ──
     brand/accent = 달빛 은색·성좌, dawn = 새벽 호박빛(킬리만자로) */
  --brand: #c7d0dc;            /* 달빛 은색 — 로고·강조선 */
  --brand-ink: #12141a;        /* 밝은 은색 위 글자(먹) */
  --accent: #a9bdd6;           /* 달빛 푸른-은 — 버튼·링크 */
  --accent-soft: #7f93ad;      /* 짙은 은청 */
  --dawn: #e0a06a;             /* 새벽 호박빛 — 히어로 지평선·포인트 */
  --dawn-soft: #caa27e;

  --ink: #e9ecf1;              /* 기본 글자 — 달빛 백색 */
  --ink-soft: #a7adb8;         /* 보조 글자 */
  --ink-faint: #6e7480;        /* 흐린 글자 */

  --bg: #0f1116;               /* 페이지 배경 — 흑연빛 밤 */
  --bg-soft: #161922;          /* 섹션 교차 배경 */
  --bg-deep: #0a0b0f;          /* 가장 깊은 밤 */
  --card: #171a22;             /* 카드 배경 */
  --card-hi: #1d212b;          /* 카드 강조 배경 */
  --line: #262a34;             /* 경계선 */
  --line-silver: rgba(199,208,220,.20); /* 은빛 경계선 */

  /* ── 폰트 ──
     head = Cormorant(라틴 세리프 디스플레이) + 고운바탕(한글),
     body = Noto Sans KR */
  --font-head: "Cormorant Garamond", "Gowun Batang", "Nanum Myeongjo", serif;
  --font-serif-ko: "Gowun Batang", "Nanum Myeongjo", serif;
  --font-body: "Noto Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ── 타이포 스케일 (반응형: clamp) ── */
  --fs-hero: clamp(3rem, 9vw, 7rem);
  --fs-h2:   clamp(1.7rem, 3.8vw, 2.9rem);
  --fs-h3:   clamp(1.2rem, 2vw, 1.5rem);
  --fs-body: clamp(1rem, 1.4vw, 1.08rem);
  --fs-small: .875rem;

  /* ── 모양 ── */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 22px;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 20px 46px -20px rgba(0,0,0,.72);
  --shadow-lg: 0 44px 92px -34px rgba(0,0,0,.82);
  --glow-moon: 0 0 0 1px var(--line-silver), 0 0 42px -8px rgba(169,189,214,.4);

  /* ── 간격·레이아웃 ── */
  --container: 1180px;
  --gutter: clamp(20px, 5vw, 44px);
  --section-y: clamp(72px, 11vw, 148px);

  /* ── 모션 ── */
  --ease: cubic-bezier(.2,.7,.2,1);
}
