/* ==========================================================================
   variables.css - 원본 디자인 시스템 변수
   LoveSwitch
   ========================================================================== */

:root {
    /* ==========================================
       Colors - Dark Theme
    ========================================== */
    --bg-primary: #09090B;
    --bg-secondary: #0F0F12;
    --bg-tertiary: #16161A;
    --bg-card: rgba(255, 255, 255, 0.03);
    --bg-card-hover: rgba(255, 255, 255, 0.06);
    --bg-glass: rgba(255, 255, 255, 0.05);
    --bg-glass-strong: rgba(255, 255, 255, 0.08);
    
    /* ==========================================
       Pink Accent
    ========================================== */
    --pink-50: #FFF0F3;
    --pink-100: #FFE0E6;
    --pink-200: #FFC2D1;
    --pink-300: #FF9BB3;
    --pink-400: #FF6B8A;
    --pink-500: #F43F5E;
    --pink-600: #E11D48;
    --pink-700: #BE123C;
    --pink-glow: rgba(244, 63, 94, 0.4);
    --pink-glow-soft: rgba(244, 63, 94, 0.15);
    
    /* ==========================================
       Text
    ========================================== */
    --text-primary: #FAFAFA;
    --text-secondary: #A1A1AA;
    --text-muted: #71717A;
    --text-dim: #52525B;
    
    /* ==========================================
       Borders
    ========================================== */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-light: rgba(255, 255, 255, 0.1);
    --border-medium: rgba(255, 255, 255, 0.15);
    --border-pink: rgba(244, 63, 94, 0.3);
    --border-pink-strong: rgba(244, 63, 94, 0.5);
    
    /* ==========================================
       Status Colors
    ========================================== */
    --success: #22C55E;
    --success-soft: rgba(34, 197, 94, 0.15);
    --warning: #F59E0B;
    --warning-soft: rgba(245, 158, 11, 0.15);
    --error: #EF4444;
    --error-soft: rgba(239, 68, 68, 0.15);
    --info: #3B82F6;
    --info-soft: rgba(59, 130, 246, 0.15);
    
    /* ==========================================
       Fonts
    ========================================== */
    --font-display: 'Playfair Display', serif;
    --font-body: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    
    /* ==========================================
       Spacing
    ========================================== */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;
    
    /* ==========================================
       Border Radius
    ========================================== */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;
    
    /* ==========================================
       Transitions
    ========================================== */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --transition-fast: 150ms var(--ease-out);
    --transition-base: 250ms var(--ease-out);
    --transition-slow: 400ms var(--ease-out);
    --transition-slower: 600ms var(--ease-out);
    
    /* ==========================================
       Shadows
    ========================================== */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 40px var(--pink-glow);
    --shadow-glow-sm: 0 0 20px var(--pink-glow-soft);
    
    /* ==========================================
       Z-Index
    ========================================== */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-toast: 800;
    
    /* ==========================================
       Layout
    ========================================== */
    --header-height: 72px;
    --container-max: 1280px;
    --container-narrow: 800px;
    --container-wide: 1440px;
}