/* ==========================================================================
   V-oda Design Tokens
   컬러 · 타이포 · 간격 · 그림자 · 반경
   Theme: Off-Black + Warm Red (Cinematic)
   ========================================================================== */

:root {
  /* ---- Core Ink (거의 무채색) ---- */
  --voda-ink:         #18181B;   /* 본문/제목 */
  --voda-ink-soft:    #27272A;   /* 카드 배경용 다크 */
  --voda-ink-muted:   #71717A;   /* 보조 텍스트 */
  --voda-line:        #E7E5E4;   /* 구분선 */

  /* ---- Surface ---- */
  --voda-bg:          #FAFAFA;   /* 앱 배경 */
  --voda-card:        #FFFFFF;   /* 카드 배경 */
  --voda-chip:        #F4F4F5;   /* 얕은 칩/필터 */

  /* ---- Brand Accent (컬러는 여기만) ---- */
  --voda-primary:     #DC2626;   /* 웜 레드 - 액션/CTA/활성 */
  --voda-primary-soft:#FEE2E2;   /* 레드 배경 톤 */
  --voda-dark:        #0A0A0A;   /* 오프블랙 - 딥 컨트라스트 */
  --voda-dark-soft:   #F4F4F5;   /* 오프블랙 배경 톤 */

  /* ---- Semantic ---- */
  --voda-gold:        #B45309;   /* 프리미엄/평점 */
  --voda-gold-soft:   #FEF3C7;
  --voda-live:        #DC2626;   /* LIVE / 긴급 */

  /* ---- Category hues (시네마틱 딥톤) ---- */
  --voda-cat-exhibit: #DC2626;   /* 전시 */
  --voda-cat-theater: #7C2D12;   /* 연극 */
  --voda-cat-musical: #701A75;   /* 뮤지컬 */
  --voda-cat-concert: #1E3A8A;   /* 콘서트 */
  --voda-cat-classic: #064E3B;   /* 클래식 */
  --voda-cat-festival:#B45309;   /* 축제 */

  /* ---- Typography ---- */
  --voda-font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Size scale */
  --voda-fs-xs:   10px;
  --voda-fs-sm:   11px;
  --voda-fs-base: 13px;
  --voda-fs-md:   14px;
  --voda-fs-lg:   16px;
  --voda-fs-xl:   20px;
  --voda-fs-2xl:  24px;
  --voda-fs-3xl:  32px;

  /* Weight */
  --voda-fw-regular: 400;
  --voda-fw-medium:  500;
  --voda-fw-semi:    600;
  --voda-fw-bold:    700;
  --voda-fw-black:   800;

  /* ---- Spacing ---- */
  --voda-sp-1: 4px;
  --voda-sp-2: 8px;
  --voda-sp-3: 12px;
  --voda-sp-4: 16px;
  --voda-sp-5: 20px;
  --voda-sp-6: 24px;
  --voda-sp-8: 32px;
  --voda-sp-10: 40px;

  /* ---- Radius ---- */
  --voda-radius-sm: 6px;
  --voda-radius-md: 10px;
  --voda-radius-lg: 14px;
  --voda-radius-xl: 20px;
  --voda-radius-full: 999px;

  /* ---- Shadow ---- */
  --voda-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --voda-shadow-md: 0 4px 14px rgba(0,0,0,0.08);
  --voda-shadow-lg: 0 8px 24px rgba(0,0,0,0.12);

  /* ---- Safe area (iOS notch) ---- */
  --voda-safe-top: env(safe-area-inset-top, 44px);
  --voda-safe-bottom: env(safe-area-inset-bottom, 24px);
}