/* ============================================
   UpFlow Design Tokens
   브랜드 컬러, 타이포, 간격, 그림자 등 통합 관리
   ============================================ */

:root {
    /* ── 브랜드 컬러 (딥 블루/티얼 계열 - 전문성 + 신뢰감) ── */
    --color-primary: #0F766E;          /* 티얼 - 메인 브랜드 */
    --color-primary-light: #14B8A6;
    --color-primary-dark: #0D5E58;
    --color-primary-bg: #F0FDFA;       /* 배경용 연한 티얼 */

    --color-accent: #6366F1;           /* 인디고 - 포인트 컬러 */
    --color-accent-light: #818CF8;
    --color-accent-dark: #4F46E5;

    /* ── 시맨틱 컬러 ── */
    --color-success: #10B981;
    --color-success-light: #D1FAE5;
    --color-success-dark: #059669;

    --color-warning: #F59E0B;
    --color-warning-light: #FEF3C7;
    --color-warning-dark: #D97706;

    --color-danger: #EF4444;
    --color-danger-light: #FEE2E2;
    --color-danger-dark: #DC2626;

    --color-info: #3B82F6;
    --color-info-light: #DBEAFE;
    --color-info-dark: #2563EB;

    /* ── 순위 변동 컬러 (한국 주식 스타일: 상승=빨강, 하락=파랑) ── */
    --color-rank-up: #EF4444;          /* 순위 상승 (빨강) */
    --color-rank-down: #3B82F6;        /* 순위 하락 (파랑) */
    --color-rank-same: #9CA3AF;        /* 변동 없음 */
    --color-rank-new: #6366F1;         /* 신규 진입 */
    --color-rank-out: #F59E0B;         /* 순위 이탈 */

    /* ── N지수/리뷰 컬러 (다크모드 호환) ── */
    --color-n1: #3B82F6;               /* N1 지수 (파랑) */
    --color-n2: #10B981;               /* N2 지수 (초록) */
    --color-n3: #F59E0B;               /* N3 지수 (주황) */
    --color-review-blog: #3B82F6;      /* 블로그 리뷰 */
    --color-review-visitor: #F59E0B;   /* 방문자 리뷰 */
    --color-review-save: #0F766E;      /* 저장수 */
    --color-captcha-warn: #d97706;     /* 캡차/확인실패 경고 */

    /* ── 뉴트럴 ── */
    --color-gray-50: #F9FAFB;
    --color-gray-100: #F3F4F6;
    --color-gray-200: #E5E7EB;
    --color-gray-300: #D1D5DB;
    --color-gray-400: #9CA3AF;
    --color-gray-500: #6B7280;
    --color-gray-600: #4B5563;
    --color-gray-700: #374151;
    --color-gray-800: #1F2937;
    --color-gray-900: #111827;

    /* ── 배경 ── */
    --bg-page: #F9FAFB;
    --bg-card: #FFFFFF;
    --bg-sidebar: #FFFFFF;
    --bg-sidebar-admin: #1F2937;
    --bg-nav: #FFFFFF;
    --bg-nav-admin: #111827;
    --bg-table-header: #F9FAFB;
    --bg-table-hover: #F3F4F6;

    /* ── 텍스트 ── */
    --text-primary: #111827;
    --text-secondary: #4B5563;
    --text-muted: #6B7280;
    --text-inverse: #FFFFFF;

    /* ── 테두리 ── */
    --border-color: #E5E7EB;
    --border-light: #F3F4F6;
    --border-focus: var(--color-primary);

    /* ── 타이포그래피 ── */
    --font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* ── 폰트 크기 (여기서 일괄 조정) ── */
    --font-size-xs: 0.8125rem;     /* 13px — 보조 텍스트, 날짜, 뱃지 */
    --font-size-sm: 0.875rem;      /* 14px — 테이블 셀, 부가 정보 */
    --font-size-base: 0.9375rem;   /* 15px — 본문, 일반 텍스트 */
    --font-size-md: 1rem;          /* 16px — 강조 텍스트, 소제목 */
    --font-size-lg: 1.125rem;      /* 18px — 카드 제목, 섹션 헤더 */
    --font-size-xl: 1.25rem;       /* 20px — 페이지 제목 */
    --font-size-2xl: 1.25rem;      /* 20px */
    --font-size-3xl: 1.5rem;       /* 24px */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.75;

    /* ── 간격 ── */
    --space-1: 0.25rem;    /* 4px */
    --space-2: 0.5rem;     /* 8px */
    --space-3: 0.75rem;    /* 12px */
    --space-4: 1rem;       /* 16px */
    --space-5: 1.25rem;    /* 20px */
    --space-6: 1.5rem;     /* 24px */
    --space-8: 2rem;       /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */

    /* ── 레이아웃 ── */
    --nav-height: 56px;
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 0px;
    --content-max-width: 1400px;

    /* ── 둥글기 ── */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

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

    /* ── 트랜지션 ── */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* ── 추가 배경 ── */
    --bg-secondary: #F3F4F6;
}

/* ============================================
   다크 모드
   ============================================ */
[data-theme="dark"] {
    --color-primary: #14B8A6;
    --color-primary-light: #2DD4BF;
    --color-primary-dark: #0F766E;
    --color-primary-bg: #1a2e2b;

    --color-accent: #818CF8;
    --color-accent-light: #A5B4FC;

    --color-success-light: #064E3B;
    --color-warning-light: #78350F;
    --color-danger-light: #7F1D1D;
    --color-info-light: #1E3A5F;

    /* N지수/리뷰 (다크모드 밝게) */
    --color-n1: #60A5FA;
    --color-n2: #34D399;
    --color-n3: #FBBF24;
    --color-review-blog: #60A5FA;
    --color-review-visitor: #FBBF24;
    --color-review-save: #2DD4BF;
    --color-captcha-warn: #FBBF24;

    --color-gray-50: #1F2937;
    --color-gray-100: #1F2937;
    --color-gray-200: #374151;
    --color-gray-300: #6B7280;
    --color-gray-400: #9CA3AF;
    --color-gray-500: #9CA3AF;
    --color-gray-600: #D1D5DB;
    --color-gray-700: #E5E7EB;
    --color-gray-800: #F3F4F6;
    --color-gray-900: #F9FAFB;

    --bg-page: #111827;
    --bg-card: #1F2937;
    --bg-sidebar: #1a1f2e;
    --bg-nav: #1a1f2e;
    --bg-table-header: #1F2937;
    --bg-table-hover: #374151;
    --bg-secondary: #374151;

    --text-primary: #F9FAFB;
    --text-secondary: #D1D5DB;
    --text-muted: #9CA3AF;
    --text-inverse: #111827;

    --border-color: #374151;
    --border-light: #2a3344;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);

    /* ── Bootstrap 5 CSS 변수 오버라이드 (전 페이지 다크모드) ── */
    --bs-body-color: #F9FAFB;
    --bs-body-bg: #111827;
    --bs-secondary-color: #D1D5DB;
    --bs-tertiary-color: #9CA3AF;
    --bs-emphasis-color: #F9FAFB;
    --bs-heading-color: #F9FAFB;
    --bs-link-color: #14B8A6;
    --bs-link-hover-color: #2DD4BF;
    --bs-border-color: #374151;
    --bs-table-color: #F9FAFB;
    --bs-table-bg: transparent;
    --bs-table-hover-bg: #374151;
    --bs-table-hover-color: #F9FAFB;
    --bs-table-striped-bg: #283445;
    --bs-table-striped-color: #F9FAFB;
    --bs-table-border-color: #374151;
    --bs-card-bg: #1F2937;
    --bs-card-border-color: #374151;
    --bs-card-color: #F9FAFB;
    --bs-card-cap-bg: #1F2937;
    --bs-modal-bg: #1F2937;
    --bs-modal-color: #F9FAFB;
    --bs-modal-border-color: #374151;
    --bs-input-bg: #1F2937;
    --bs-input-color: #F9FAFB;
    --bs-input-border-color: #374151;
    --bs-input-placeholder-color: #6B7280;
    --bs-list-group-bg: #1F2937;
    --bs-list-group-color: #F9FAFB;
    --bs-list-group-border-color: #374151;
    --bs-nav-link-color: #D1D5DB;
    --bs-nav-link-hover-color: #14B8A6;
    --bs-dropdown-bg: #1F2937;
    --bs-dropdown-color: #F9FAFB;
    --bs-dropdown-border-color: #374151;
    --bs-dropdown-link-color: #D1D5DB;
    --bs-dropdown-link-hover-color: #F9FAFB;
    --bs-dropdown-link-hover-bg: #374151;
    color-scheme: dark;
}