/* ==========================================================================
   글로벌 디자인 토큰 및 CSS 변수 정의 (variables.css)
   design.md 가이드에 맞춘 모던 다크 & 글래스모피즘 테마 변수입니다.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     1. 브랜드 및 포인트 컬러 (Brand & Accent Colors)
     -------------------------------------------------------------------------- */
  --color-primary: #6366f1;         /* 일렉트릭 인디고 (메인 포인트) */
  --color-primary-hover: #4f46e5;   /* 메인 포인트 호버 색상 */
  --color-secondary: #8b5cf6;       /* 바이올렛 그로우 (보조 그라데이션) */
  --color-accent: #06b6d4;          /* 시안 스파크 (하이라이트 및 배지) */
  
  /* --------------------------------------------------------------------------
     2. 중립 다크 컬러 (Neutral Dark Base)
     -------------------------------------------------------------------------- */
  --bg-base: #0f172a;               /* 웹 전체 최하단 다크 슬레이트 배경 */
  --bg-surface: #1e293b;            /* 카드 및 서피스 배경 */
  --bg-surface-hover: #26354a;      /* 서피스 호버 상태 배경 */
  --bg-glass: rgba(255, 255, 255, 0.05); /* 글래스모피즘 요소 배경 */
  --bg-glass-hover: rgba(255, 255, 255, 0.1); /* 글래스모피즘 호버 배경 */
  --border-glass: rgba(255, 255, 255, 0.1);   /* 반투명 테두리 선 */
  --border-glass-bright: rgba(255, 255, 255, 0.2); /* 밝은 반투명 테두리 */

  /* --------------------------------------------------------------------------
     3. 타이포그래피 텍스트 컬러 (Text Colors)
     -------------------------------------------------------------------------- */
  --text-primary: #f8fafc;          /* 기본 헤드라인 및 주요 텍스트 (밝은 화이트) */
  --text-secondary: #94a3b8;        /* 본문 및 설명 서브 텍스트 */
  --text-muted: #64748b;            /* 캡션, 미활성 텍스트 및 저작권 문구 */

  /* --------------------------------------------------------------------------
     4. 상태 및 피드백 컬러 (Functional / Status Colors)
     -------------------------------------------------------------------------- */
  --color-success: #10b981;         /* 성공 / 저장 완료 / 라이브 온 상태 */
  --color-warning: #f59e0b;         /* 경고 상태 */
  --color-danger: #ef4444;          /* 위험 / 삭제 / 오류 상태 */

  /* --------------------------------------------------------------------------
     5. 타이포그래피 서체 지정 (Typography Fonts)
     -------------------------------------------------------------------------- */
  --font-family: 'Inter', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-code: 'Fira Code', 'JetBrains Mono', monospace;

  /* --------------------------------------------------------------------------
     6. 8px 스페이싱 시스템 (Spacing Scale)
     -------------------------------------------------------------------------- */
  --space-xs: 4px;                  /* 매우 촘촘한 여백 */
  --space-sm: 8px;                  /* 아이콘 및 요소 간격 */
  --space-md: 16px;                 /* 기본 카드 내부 패딩 */
  --space-lg: 24px;                 /* 섹션 간격 및 카드 대형 패딩 */
  --space-xl: 32px;                 /* 컨테이너 좌우 여백 */
  --space-2xl: 48px;                /* 대형 섹션 구분 여백 */
  --space-3xl: 64px;                /* 히로 섹션 상하 여백 */

  /* --------------------------------------------------------------------------
     7. 모서리 곡률 radius (Border Radius Scale)
     -------------------------------------------------------------------------- */
  --radius-sm: 8px;                 /* 소형 태그 및 버튼 */
  --radius-md: 12px;                /* 중형 버튼 및 입력창 */
  --radius-lg: 16px;                /* 카드 및 모달 컨테이너 */
  --radius-full: 9999px;            /* 알약(Pill) 모양 태그 및 원형 버튼 */

  /* --------------------------------------------------------------------------
     8. 그림자 및 글래스 효과 (Shadows & Glass Filter)
     -------------------------------------------------------------------------- */
  --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  --shadow-glow-primary: 0 0 25px rgba(99, 102, 241, 0.35);
  --shadow-glow-accent: 0 0 20px rgba(6, 182, 212, 0.3);
  --backdrop-blur: blur(12px);

  /* --------------------------------------------------------------------------
     9. 애니메이션 속도 및 트랜지션 (Transitions)
     -------------------------------------------------------------------------- */
  --ease-elastic: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.15s var(--ease-elastic);
  --transition-normal: all 0.25s var(--ease-elastic);
  --transition-slow: all 0.4s var(--ease-elastic);
}