/* 🎨 ProductStoryChain Design Tokens
 * 이 파일은 UI DesignGuide.md 기반 디자인 시스템을 정의합니다.
 * 모든 컴포넌트에서 이 변수들을 사용하여 일관된 디자인을 유지합니다.
 */

:root {
   /* 🎨 Primary Colors - 주요 색상 */
   --color-primary: #0A2540;
   /* 진한 네이비 (신뢰감, 금융 느낌) */
   --color-accent: #00C39A;
   /* 민트 (친환경, 포인트 강조용) */
   --color-success: #6ACB7C;
   /* 리워드/NFT 알림 강조 */
   --color-warning: #FFB200;
   /* 주의 메시지 또는 QR 비활성 상태 */

   /* 🎨 Neutral Colors - 중성 색상 */
   --color-background: #F8F9FA;
   /* 연한 그레이 (기본 배경) */
   --color-surface: #FFFFFF;
   /* 카드/패널 배경 */
   --color-border: #E0E0E0;
   /* 카드/영역 구분선 */
   --color-text-primary: #1E1E1E;
   /* 본문 텍스트 */
   --color-text-secondary: #6C757D;
   /* 보조 텍스트 */
   --color-text-disabled: #ADB5BD;
   /* 비활성 텍스트 */

   /* 🎨 Semantic Colors - 의미 색상 */
   --color-error: #DC3545;
   /* 오류 메시지 */
   --color-info: #0DCAF0;
   /* 정보 메시지 */

  /* 📝 Typography - 타이포그래피 (모던 다국어 최적화) */
  --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', monospace;

   /* 📏 Font Sizes - 폰트 크기 */
   --font-size-xs: 0.75rem;
   /* 12px - 툴팁/라벨 */
   --font-size-sm: 0.875rem;
   /* 14px - 본문/버튼 */
   --font-size-base: 1rem;
   /* 16px - 기본 본문 */
   --font-size-lg: 1.25rem;
   /* 20px - 섹션 제목 (H2) */
   --font-size-xl: 1.75rem;
   /* 28px - 타이틀 (H1) 최소 */
   --font-size-2xl: 2.25rem;
   /* 36px - 타이틀 (H1) 기본(상향) */

   /* 📏 Font Weights - 폰트 굵기 */
   --font-weight-normal: 400;
   /* 일반 텍스트 */
   --font-weight-medium: 500;
   /* 중간 굵기 (섹션 제목) */
   --font-weight-semibold: 600;
   /* 약간 굵게 */
   --font-weight-bold: 700;
   /* 굵게 (타이틀, 버튼) */
   --font-weight-extrabold: 800;
   /* 매우 굵게 (히어로 타이틀) */

   /* 📏 Line Heights - 줄 간격 */
   --line-height-tight: 1.25;
   /* 제목용 */
   --line-height-normal: 1.5;
   /* 본문용 */
   --line-height-relaxed: 1.75;
   /* 여유로운 간격 */

   /* 📐 Spacing - 간격 시스템 (8px 기반) */
   --spacing-xs: 0.25rem;
   /* 4px */
   --spacing-sm: 0.5rem;
   /* 8px */
   --spacing-md: 1rem;
   /* 16px */
   --spacing-lg: 1.5rem;
   /* 24px */
   --spacing-xl: 2rem;
   /* 32px */
   --spacing-2xl: 3rem;
   /* 48px */
   --spacing-3xl: 4rem;
   /* 64px */

   /* 🎯 Border Radius - 모서리 둥글기 */
   --radius-sm: 0.25rem;
   /* 4px - 작은 요소 */
   --radius-md: 0.5rem;
   /* 8px - 기본 카드/버튼 */
   --radius-lg: 0.75rem;
   /* 12px - 큰 카드 */
   --radius-xl: 1rem;
   /* 16px - 특별한 요소 */
   --radius-full: 9999px;
   /* 완전한 원형 */

   /* 🌊 Shadows - 그림자 */
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

   /* 🎬 Transitions - 애니메이션 */
   --transition-fast: 150ms ease-in-out;
   --transition-normal: 250ms ease-in-out;
   --transition-slow: 350ms ease-in-out;

   /* 📱 Breakpoints - 반응형 중단점 */
   --breakpoint-sm: 640px;
   /* 모바일 */
   --breakpoint-md: 768px;
   /* 태블릿 */
   --breakpoint-lg: 1024px;
   /* 데스크톱 */
   --breakpoint-xl: 1280px;
   /* 대형 데스크톱 */

   /* 📐 Container Widths - 컨테이너 최대 너비 */
   --container-sm: 640px;
   --container-md: 768px;
   --container-lg: 1024px;
   --container-xl: 1280px;

   /* 🎯 Z-Index - 레이어 순서 */
   --z-dropdown: 10;
   --z-sticky: 20;
   --z-fixed: 30;
   --z-modal: 40;
   --z-tooltip: 50;
}

/* 🌙 Dark Mode(옵트인) - 시스템 선호에 따라 자동 전환하지 않고,
   html.theme-dark 클래스가 있을 때만 다크 토큰을 적용합니다. */
html.theme-dark {
   --color-background: #0F172A;
   --color-surface: #1E293B;
   --color-text-primary: #F8FAFC;
   --color-text-secondary: #CBD5E1;
   --color-border: #334155;
}

/* 📱 Mobile First Approach - 모바일 우선 접근 */
@media (max-width: 767px) {
   :root {
      /* 모바일에서 폰트 크기 약간 조정 */
      --font-size-xl: 1.375rem;
      /* 22px */
      --font-size-2xl: 1.625rem;
      /* 26px */

      /* 모바일에서 간격 약간 축소 */
      --spacing-lg: 1.25rem;
      /* 20px */
      --spacing-xl: 1.75rem;
      /* 28px */
   }
}