/*
 * ============================================================================
 * Playground 디자인 시스템 - 디자인 토큰 (CSS Custom Properties)
 * ============================================================================
 *
 * 이 파일은 프로젝트 전체에서 사용되는 디자인 토큰을 정의합니다.
 * 모든 색상, 타이포그래피, 간격, 그림자 등은 이 파일의 변수를 사용하세요.
 *
 * 사용법: var(--변수명)
 * 예시:   color: var(--color-primary);
 *         padding: var(--spacing-4);
 *
 * ⚠️ 하드코딩된 값(#667eea, 16px 등)을 직접 사용하지 마세요.
 *    반드시 CSS 변수를 사용하세요.
 * ============================================================================
 */

:root {
    /* ========================================================================
     * 색상 (Colors)
     * ======================================================================== */

    /* Primary - 메인 브랜드 색상 (다크 테마, 틸블루 엑센트) */
    --color-primary: #5BA4CF;
    --color-primary-dark: #3D8AB9;
    --color-primary-light: #7DBDE8;
    --color-primary-hover: #4A93BE;
    --color-primary-gradient: linear-gradient(135deg, #1E2A3A 0%, #2C3E50 100%);

    /* Neutral - 텍스트, 배경, 테두리 (다크 테마) */
    --color-text-primary: #E8EAED;
    --color-text-secondary: #9AA0A6;
    --color-text-muted: #8B95A1;  /* #6B7280 → #8B95A1 (WCAG AA 4.7:1 충족) */
    --color-text-inverse: #ffffff;

    --color-bg-primary: #1A1D23;
    --color-bg-secondary: #0D1117;
    --color-bg-tertiary: #21262D;
    --color-bg-dark: #0A0C10;
    --color-bg-dark-secondary: #161B22;

    --color-border: #30363D;
    --color-border-light: #21262D;
    --color-border-hover: #484F58;

    /* Semantic - 상태 표현 색상 (다크 테마 적용) */
    --color-success: #3FB950;
    --color-success-bg: rgba(63, 185, 80, 0.15);
    --color-success-text: #56D364;
    --color-success-alt: #4CAF50;
    --color-success-alt-hover: #45a049;

    --color-error: #F85149;
    --color-error-bg: rgba(248, 81, 73, 0.15);
    --color-error-text: #FF7B72;
    --color-error-light: rgba(248, 81, 73, 0.1);
    --color-error-border: #F85149;

    --color-info: #58A6FF;
    --color-info-bg: rgba(88, 166, 255, 0.15);
    --color-info-text: #79C0FF;

    --color-warning: #D29922;
    --color-warning-bg: rgba(210, 153, 34, 0.15);
    --color-warning-text: #E3B341;

    /* Interactive - 인터랙션 색상 */
    --color-bookmark: #FFD700;
    --color-focus-ring: rgba(91, 164, 207, 0.5);
    --focus-ring-shadow: 0 0 0 3px rgba(91, 164, 207, 0.5);
    --color-overlay: rgba(0, 0, 0, 0.7);
    --color-overlay-light: rgba(255, 255, 255, 0.1);
    --color-overlay-dark: rgba(0, 0, 0, 0.85);

    /* Viewer - 뷰어 전용 색상 */
    --color-viewer-bg: #000000;
    --color-viewer-btn-secondary: #484F58;
    --color-viewer-btn-secondary-hover: #3D434B;


    /* ========================================================================
     * 타이포그래피 (Typography)
     * ======================================================================== */

    /* 폰트 패밀리 */
    --font-family-base: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;

    /* 폰트 크기 - 8단계 스케일 (한글 가독성 최적화) */
    --font-size-xs: 11px;     /* 캡션, 뱃지 */
    --font-size-sm: 12px;     /* 보조 텍스트, 날짜 */
    --font-size-md: 13px;     /* 작은 본문 */
    --font-size-base: 15px;   /* 기본 본문 (14→15, 한글 가독성 개선) */
    --font-size-lg: 17px;     /* 강조 본문, 폼 입력 (16→17) */
    --font-size-xl: 20px;     /* 소제목 */
    --font-size-2xl: 24px;    /* 중제목, 페이지 타이틀 */
    --font-size-3xl: 28px;    /* 대제목 */
    --font-size-4xl: 32px;    /* 프로필명 등 특대 텍스트 */

    /* 폰트 굵기 */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* 줄 높이 (한글 최적화: 1.5→1.65) */
    --line-height-tight: 1.2;
    --line-height-base: 1.65;
    --line-height-relaxed: 1.8;

    /* 한글 자간 */
    --letter-spacing-korean: -0.01em;


    /* ========================================================================
     * 간격 (Spacing) - 4px 기반 스케일
     * ======================================================================== */

    --spacing-0: 0;
    --spacing-1: 4px;      /* 아이콘 간격 */
    --spacing-2: 8px;      /* 요소 내부 최소 여백 */
    --spacing-3: 10px;     /* 작은 여백 */
    --spacing-4: 12px;     /* 요소 간 간격 */
    --spacing-5: 16px;     /* 기본 패딩/마진 */
    --spacing-6: 20px;     /* 컨테이너 패딩 */
    --spacing-7: 24px;     /* 섹션 내부 간격 */
    --spacing-8: 30px;     /* 섹션 간 간격 */
    --spacing-9: 40px;     /* 대형 섹션 간격 */
    --spacing-10: 60px;    /* 페이지 레벨 간격 */


    /* ========================================================================
     * 레이아웃 (Layout)
     * ======================================================================== */

    /* 컨테이너 최대 너비 */
    --container-sm: 420px;     /* 로그인, 소형 폼 */
    --container-md: 600px;     /* 프로필 수정, 중형 폼 */
    --container-lg: 800px;     /* 뷰어 */
    --container-xl: 1000px;    /* 프로필 */
    --container-max: 1200px;   /* 메인 컨테이너 */

    /* 네비게이션 높이 */
    --navbar-height: 60px;
    --navbar-height-mobile: 60px;
    --nav-height: 60px;  /* 별칭 (Sprint 2 컴포넌트 호환) */

    /* 터치 타겟 (iOS HIG 최소치) */
    --touch-target-min: 44px;

    /* Z-index 스케일 */
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-fixed: 900;
    --z-fab: 900;
    --z-modal-backdrop: 950;
    --z-modal: 1000;
    --z-popover: 1050;
    --z-toast: 1100;
    --z-tooltip: 1200;


    /* ========================================================================
     * 테두리 (Border)
     * ======================================================================== */

    /* Border Radius - 5단계 */
    --radius-sm: 4px;      /* 뱃지, 태그 */
    --radius-md: 6px;      /* 버튼, 작은 카드 */
    --radius-lg: 8px;      /* 입력 필드, 중간 카드 */
    --radius-xl: 12px;     /* 큰 카드 */
    --radius-2xl: 16px;    /* 모달, 프로필 헤더 */
    --radius-full: 9999px; /* 원형, 태그 */

    /* Border Width */
    --border-width: 1px;
    --border-width-thick: 2px;
    --border-width-accent: 4px;   /* 메시지 왼쪽 보더 등 */


    /* ========================================================================
     * 그림자 (Shadows)
     * ======================================================================== */

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 10px 30px rgba(0, 0, 0, 0.5);
    --shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.6);
    --shadow-navbar: 0 2px 10px rgba(0, 0, 0, 0.4);
    --shadow-primary: 0 4px 12px rgba(91, 164, 207, 0.2);
    --shadow-primary-lg: 0 10px 20px rgba(91, 164, 207, 0.2);
    --shadow-primary-hover: 0 6px 20px rgba(91, 164, 207, 0.2);


    /* ========================================================================
     * 트랜지션 (Transitions)
     * ======================================================================== */

    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-slide: 0.3s ease-in-out;


    /* ========================================================================
     * 반응형 브레이크포인트 (참조용 - CSS Variables로 미디어 쿼리는 사용 불가)
     *
     * @media (max-width: 480px)  → 모바일 (소형)
     * @media (max-width: 768px)  → 모바일/태블릿
     * @media (max-width: 1024px) → 태블릿
     * @media (min-width: 769px)  → 데스크탑
     * ======================================================================== */

    /* 그리드 설정 */
    --grid-gap: 20px;
    --grid-gap-sm: 16px;
    --grid-gap-xs: 12px;
    --grid-columns-webtoon: repeat(auto-fill, minmax(280px, 1fr));
    --grid-columns-episode: repeat(auto-fill, minmax(120px, 1fr));
    --grid-columns-bookmark: repeat(auto-fill, minmax(200px, 1fr));
}