/**
 * SocialEyes Global Styles
 * 
 * Defines CSS variables for light and dark themes.
 * Presentations use these variables for consistent theming.
 */

/* Default theme variables - auto light/dark based on system preference */
:root {
    /* Dark theme by default */
    --socialeyes-text: #e4e6eb;
    --socialeyes-text-secondary: #b0b3b8;
    --socialeyes-border: #FF6B35;
    --socialeyes-bg: #FFFFFF;
    --socialeyes-post-bg: #4C1F2F;
    
    --socialeyes-primary: #E8692A;
    --socialeyes-accent: linear-gradient(135deg, #FF6B35 0%, #D2691E 100%);
    --socialeyes-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    --socialeyes-shadow-hover: 0 4px 24px rgba(0, 0, 0, 0.12);
    --socialeyes-radius: 6px;
    --socialeyes-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light theme - automatically applied based on system preference */
@media (prefers-color-scheme: light) {
    :root {
        --socialeyes-text: #1c1e21;
        --socialeyes-text-secondary: #65676b;
        --socialeyes-border: #FF6B35;
        --socialeyes-bg: #e3e2e1;
        --socialeyes-post-bg: #FFFFFF;
    }
}

/* Force light theme via class */
.socialeyes-skin-light {
    --socialeyes-text: #1c1e21;
    --socialeyes-text-secondary: #65676b;
    --socialeyes-border: #FF6B35;
    --socialeyes-bg: #e3e2e1;
    --socialeyes-post-bg: #FFFFFF;
}

/* Force dark theme via class */
.socialeyes-skin-dark {
    --socialeyes-text: #e4e6eb;
    --socialeyes-text-secondary: #b0b3b8;
    --socialeyes-border: #FF6B35;
    --socialeyes-bg: #FFFFFF;
    --socialeyes-post-bg: #4C1F2F;
}

/**
 * Customization Guide
 * 
 * Override these variables in Appearance → Customize → Additional CSS:
 * 
 * :root {
 *   --socialeyes-primary: #your-brand-color;
 *   --socialeyes-accent: linear-gradient(135deg, #color1, #color2);
 *   --socialeyes-text: #your-text-color;
 *   --socialeyes-post-bg: #your-card-background;
 * }
 * 
 * Available variables:
 * - --socialeyes-text: Main text color
 * - --socialeyes-text-secondary: Secondary text (dates, meta)
 * - --socialeyes-border: Border and accent color
 * - --socialeyes-bg: Overall background
 * - --socialeyes-post-bg: Individual post/card background
 * - --socialeyes-primary: Primary action color
 * - --socialeyes-accent: Gradient accent (use for highlights)
 * - --socialeyes-shadow: Default shadow
 * - --socialeyes-shadow-hover: Hover state shadow
 * - --socialeyes-radius: Border radius
 * - --socialeyes-transition: Animation timing
 */