/* ============================================================
   디자인 토큰 — 폰셀프 사이니지 공통 변수
   색·여백·반경·그림자·글자 크기를 한 곳에서 관리한다.
   콘텐츠는 이 변수만 사용하면 일관된 품질이 유지된다.
   ============================================================ */
:root {
  /* ---- 색 ---- */
  --bg: #0b1c3f;            /* 배경 (딥 네이비) */
  --bg-soft: #112a55;      /* 배경 보조 */
  --surface: #15315f;      /* 카드색 */
  --surface-2: #1c3d72;    /* 카드 보조 */
  --main: #2f6fed;         /* 메인색 */
  --accent: #f5b301;       /* 강조색 (골드) */
  --accent-2: #46d0a8;     /* 보조 강조 (민트) */
  --warn: #ff5a5f;         /* 경고색 */
  --text: #f4f8ff;         /* 본문색 */
  --text-dim: #b6c6e6;     /* 약한 본문 */
  --text-ink: #0b1c3f;     /* 밝은 배경 위 글자 */
  --line: rgba(255, 255, 255, 0.12);

  /* ---- 여백 단위 (8pt) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ---- 모서리 반경 ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- 그림자 ---- */
  --shadow-1: 0 4px 14px rgba(0, 0, 0, 0.25);
  --shadow-2: 0 12px 34px rgba(0, 0, 0, 0.35);
  --glow-accent: 0 0 24px rgba(245, 179, 1, 0.45);

  /* ---- 글자 크기 (clamp 로 화면 대응) ---- */
  --fs-kicker: clamp(14px, 1.6vw, 22px);
  --fs-body: clamp(16px, 2vw, 30px);
  --fs-lead: clamp(20px, 2.6vw, 40px);
  --fs-title: clamp(28px, 4.5vw, 72px);
  --fs-hero: clamp(40px, 7vw, 120px);
  --fs-mega: clamp(64px, 14vw, 260px); /* 초대형 숫자 */

  /* ---- 전환/모션 ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 200ms;
  --t-base: 450ms;
  --t-slow: 900ms;
}