/* ============================================================
   CSS Variables - Editorial Design System
   ============================================================ */

:root {
    /* Primary - Editorial Black */
    --color-primary: #1A1A1A;
    --color-primary-light: #F5F5F5;
    --color-primary-dark: #000000;
    --color-primary-bg: #F5F5F5;

    /* Neutral */
    --color-bg: #E8E8E8;
    --color-surface: #FFFFFF;
    --color-surface-secondary: #FAFAFA;
    --color-border: #E5E5E5;
    --color-border-light: #F0F0F0;

    /* Text */
    --color-text: #1A1A1A;
    --color-text-secondary: #666666;
    --color-text-tertiary: #999999;
    --color-text-link: #1A1A1A;

    /* Semantic */
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error: #EF4444;
    --color-info: #3B82F6;

    /* Mode Colors - Heatmap */
    --color-heatmap-1: #FEE2E2;
    --color-heatmap-2: #FECACA;
    --color-heatmap-3: #FCA5A5;
    --color-heatmap-4: #F87171;
    --color-heatmap-5: #EF4444;
    --color-heatmap-6: #DC2626;
    --color-heatmap-7: #B91C1C;

    /* Brand Mode - Orange */
    --color-brand-light: #FED7AA;
    --color-brand: #EA580C;
    
    /* Ingredient Mode - Green */
    --color-ingredient-light: #BBF7D0;
    --color-ingredient: #16A34A;
    
    /* Hashtag Mode - Purple */
    --color-hashtag-light: #DDD6FE;
    --color-hashtag: #7C3AED;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Typography */
    --font-primary: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif-kr: 'Noto Serif KR', Georgia, 'Times New Roman', serif;
    --font-sans-kr: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.1);

    /* Border Radius - DESIGN_GUIDE.md 규격 */
    --radius-sm: 2px;      /* UI 요소: 버튼, 칩, 인풋, 컨트롤 */
    --radius-md: 8px;      /* 카드, 섹션 */
    --radius-full: 9999px; /* 원형 요소 전용 */

    /* Layout */
    --header-height: 128px;
    --footer-height: 28px;
    --sidebar-width: 380px;
    --sidebar-detail-width: 380px;
}