/* ============================================
   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: #10B981;          /* 순위 상승 */
    --color-rank-down: #EF4444;        /* 순위 하락 */
    --color-rank-same: #9CA3AF;        /* 변동 없음 */
    --color-rank-new: #6366F1;         /* 신규 진입 */
    --color-rank-out: #F59E0B;         /* 순위 이탈 */

    /* ── 뉴트럴 ── */
    --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: #9CA3AF;
    --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.75rem;       /* 12px */
    --font-size-sm: 0.8125rem;     /* 13px */
    --font-size-base: 0.875rem;    /* 14px */
    --font-size-md: 0.9375rem;     /* 15px */
    --font-size-lg: 1rem;          /* 16px */
    --font-size-xl: 1.125rem;      /* 18px */
    --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;
}