/**
 * Feature Content - CSS Variables
 * 
 * 共用 CSS 變數定義
 * 
 * @package Feature_Content
 * @since 2.1.0
 */

:root {
    /* Max widths */
    --fc-max-width: 1200px;
    --fc-content-width: 800px;
    --fc-narrow-width: 600px;
    
    /* Spacing */
    --fc-spacing-xs: 10px;
    --fc-spacing-sm: 20px;
    --fc-spacing-md: 40px;
    --fc-spacing-lg: 60px;
    --fc-spacing-xl: 80px;
    --fc-spacing-xxl: 100px;
    
    /* Font sizes */
    --fc-font-xxl: 64px;
    --fc-font-xl: 48px;
    --fc-font-lg: 24px;
    --fc-font-md: 18px;
    --fc-font-sm: 14px;
    --fc-font-xs: 12px;
    
    /* Line heights */
    --fc-line-height-tight: 1.2;
    --fc-line-height-snug: 1.4;
    --fc-line-height-normal: 1.6;
    --fc-line-height-relaxed: 1.8;
    --fc-line-height-loose: 2.0;
    
    /* Border radius */
    --fc-border-radius: 8px;
    --fc-border-radius-sm: 4px;
    --fc-border-radius-lg: 16px;
    --fc-border-radius-xl: 24px;
    
    /* Colors */
    --fc-primary-color: #005bac;
    --fc-primary-dark: #004690;
    --fc-secondary-color: #00a8e8;
    --fc-text-color: #333;
    --fc-text-light: #666;
    --fc-text-muted: #999;
    --fc-bg-light: #f8f9fa;
    --fc-bg-dark: #1a3a5c;
    --fc-border-color: #e0e0e0;
    
    /* Shadows */
    --fc-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --fc-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
    --fc-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
    --fc-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.25);
    
    /* Transitions */
    --fc-transition-fast: 0.15s ease;
    --fc-transition-normal: 0.3s ease;
    --fc-transition-slow: 0.5s ease;
    
    /* Z-index layers */
    --fc-z-sticky: 100;
    --fc-z-overlay: 200;
    --fc-z-modal: 300;
}

/* ========================================
   Dark Mode Variable Overrides
   ======================================== */

/* Auto mode - follows system preference */
@media (prefers-color-scheme: dark) {
    body.fc-dark-mode-auto,
    body.hd-dark-mode-auto {
        --fc-primary-color: #4da3e8;
        --fc-primary-dark: #7bbef0;
        --fc-secondary-color: #5cd4ff;
        --fc-text-color: #e8e8e8;
        --fc-text-light: #b0b0b0;
        --fc-text-muted: #808080;
        --fc-bg-light: #2d2d2d;
        --fc-bg-dark: #1a1a1a;
        --fc-border-color: #404040;
        
        /* Shadows for dark mode */
        --fc-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
        --fc-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
        --fc-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
        --fc-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
    }
}

/* Manual dark mode - user toggled */
body.fc-dark-mode,
body.hd-dark-mode,
body.dark-mode {
    --fc-primary-color: #4da3e8;
    --fc-primary-dark: #7bbef0;
    --fc-secondary-color: #5cd4ff;
    --fc-text-color: #e8e8e8;
    --fc-text-light: #b0b0b0;
    --fc-text-muted: #808080;
    --fc-bg-light: #2d2d2d;
    --fc-bg-dark: #1a1a1a;
    --fc-border-color: #404040;
    
    /* Shadows for dark mode */
    --fc-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --fc-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --fc-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --fc-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
}