/**
 * tokens.css — 디자인 토큰 (단일 진실 공급원)
 * 모든 색상·여백·타이포·전환 값은 여기서만 정의한다.
 * 다른 CSS 파일은 절대 하드코딩하지 않고 var() 로 참조한다.
 */

:root {
  /* ── 색상 ─────────────────────────────────────── */
  --color-primary:      #001241;   /* 브랜드 네이비 */
  --color-blue:         #0052cc;   /* 브랜드 블루 */
  --color-sky:          #9bcbeb;   /* 스카이 블루 */
  --color-gray:         #53565a;   /* 스틸 그레이 */
  --color-gold:         #c9a96e;   /* 골드 (CTA 포인트) */
  --color-dark:         #222;
  --color-light:        #fff;
  --color-accent:       #fff700;   /* 형광 노랑 (배지 등) */
  --color-text:         #222;
  --color-text-muted:   #666;
  --color-submenu:      #333;
  --color-submenu-hover:#444;

  /* 기존 변수명 호환 (다른 CSS가 참조 중) */
  --sharp-prussian-blue: var(--color-primary);
  --sharp-pure-blue:     var(--color-blue);
  --sharp-sky-blue:      var(--color-sky);
  --sharp-steel-gray:    var(--color-gray);

  /* ── 여백 ─────────────────────────────────────── */
  --page-gutter:    16px;   /* 모바일 좌우 여백 */
  --section-gap:    80px;   /* 섹션 상하 패딩 */
  --container-max:  1200px; /* 최대 컨테이너 너비 */

  /* ── 네비게이션 ───────────────────────────────── */
  --nav-height:  70px;
  --nav-bg:      rgba(10, 25, 47, 0.92);
  --nav-bar:     rgba(10, 25, 47, 0.92); /* 기존 호환 */

  /* ── 전환 ─────────────────────────────────────── */
  --transition:       0.3s ease;
  --transition-speed: 0.3s;          /* 기존 호환 */
}

/* 모바일에서 섹션 간격 축소 */
@media (max-width: 768px) {
  :root {
    --section-gap: 48px;
  }
}