/**
 * LightLink Theme - Light & Dark Mode Support
 * Include this file in all pages for consistent theming
 */

/* ============================================
   LIGHT MODE (Default)
   Clean, minimal with orange accents
   ============================================ */
:root {
    /* Backgrounds */
    --bg-primary: #FFFFFF;
    --bg-secondary: #FAFAFA;
    --bg-tertiary: #F5F5F5;
    --bg-elevated: #FFFFFF;
    --bg-card: #FFFFFF;
    
    /* Text colors */
    --text-primary: #1A1A1A;
    --text-secondary: #4A5568;
    --text-tertiary: #6B7280;
    --text-muted: #9CA3AF;
    
    /* Border colors */
    --border-color: #E5E7EB;
    --border-color-hover: #D1D5DB;
    --border-accent: rgba(255, 107, 53, 0.3);
    
    /* Shadows - subtle in light mode */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-accent: 0 4px 12px rgba(255, 107, 53, 0.2);
    
    /* Orange accent */
    --accent-primary: #FF6B35;
    --accent-hover: #FF8557;
    --accent-active: #E55A2B;
    --accent-subtle: rgba(255, 107, 53, 0.1);
    --accent-border: rgba(255, 107, 53, 0.3);
    
    /* Brand colors */
    --signal-orange: #FF6B35;
    --pure-white: #FFFFFF;
    
    /* Background effect for light mode - very subtle */
    --bg-gradient-center: rgba(255, 107, 53, 0.02);
    --bg-gradient-edge: rgba(255, 255, 255, 0);
}

/* ============================================
   DARK MODE
   Deep blacks with orange glow
   ============================================ */
[data-theme="dark"] {
    /* Backgrounds */
    --bg-primary: #000000;
    --bg-secondary: #0D0D0D;
    --bg-tertiary: #111111;
    --bg-elevated: #111111;
    --bg-card: #0D0D0D;
    
    /* Text colors */
    --text-primary: #FFFFFF;
    --text-secondary: #D1D5DB;
    --text-tertiary: #9CA3AF;
    --text-muted: #6B7280;
    
    /* Border colors */
    --border-color: rgba(255, 107, 53, 0.15);
    --border-color-hover: rgba(255, 107, 53, 0.3);
    --border-accent: rgba(255, 107, 53, 0.5);
    
    /* Shadows - glows in dark mode */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-accent: 0 0 20px rgba(255, 107, 53, 0.4);
    
    /* Orange accent */
    --accent-primary: #FF6B35;
    --accent-hover: #FF8557;
    --accent-active: #E55A2B;
    --accent-subtle: rgba(255, 107, 53, 0.15);
    --accent-border: rgba(255, 107, 53, 0.3);
    
    /* Brand colors */
    --signal-orange: #FF6B35;
    --pure-white: #FFFFFF;
    
    /* Background effect for dark mode - orange glow */
    --bg-gradient-center: rgba(255, 107, 53, 0.15);
    --bg-gradient-edge: rgba(0, 0, 0, 0);
}

/* Apply theme to common elements */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}