:root {
    /* Brand Colors */
    --sf-color-brand: #1A5CFF;
    --sf-color-accent: #00E5FF;
    --sf-color-brand-gradient: linear-gradient(135deg, var(--sf-color-brand) 0%, var(--sf-color-accent) 100%);
    
    /* Glass Effect (Light) */
    --sf-glass: rgba(255, 255, 255, 0.45); 
    --sf-glass-stroke: rgba(255, 255, 255, 0.5);
    --sf-glass-blur: blur(10px) saturate(180%);
    
    /* Background & Text (Light) */
    --sf-bg-color: #EBF0F5;
    --sf-text-main: #1C1C1E;
    --sf-text-muted: #6E6E73;
    
    /* UI Elements */
    --sf-input-bg: rgba(255, 255, 255, 0.5);
    --sf-input-focus-bg: rgba(255, 255, 255, 0.85); 
    --sf-border: rgba(0, 0, 0, 0.05);
    --sf-radius: 24px;
    
    /* Shadows & Glow */
    --sf-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.08);
    --sf-color-glow: 0 10px 30px rgba(26, 92, 255, 0.3);

    --sf-btn-disabled-bg: rgba(0, 0, 0, 0.06); 
    --sf-btn-disabled-text: rgba(0, 0, 0, 0.3);
    --sf-btn-hover: rgba(255, 255, 255, 0.85);

    /* Avatars */
    --sf-av-red: linear-gradient(135deg, #ff516a, #ff885e);
    --sf-av-orange: linear-gradient(135deg, #ff885e, #ffcd51);
    --sf-av-yellow: linear-gradient(135deg, #ffcd51, #e7eb75);
    --sf-av-green: linear-gradient(135deg, #7ac36a, #b4ed7e);
    --sf-av-cyan: linear-gradient(135deg, #549cdd, #8cd4f8);
    --sf-av-blue: linear-gradient(135deg, #62bfe8, #a6dbff);
    --sf-av-purple: linear-gradient(135deg, #a695e7, #d1c4e9);
    --sf-av-violet: linear-gradient(135deg, #8475e1, #a695e7);
    --sf-av-pink: linear-gradient(135deg, #ee7aae, #ffb1d9);
    --sf-av-gray: linear-gradient(135deg, #b1b9be, #d1d9de);
}

@media (prefers-color-scheme: dark) {
    :root {
        --sf-bg-color: #0D1117; 
        
        /* Glass Effect (Dark) */
        --sf-glass: rgba(30, 41, 59, 0.5); 
        --sf-glass-stroke: rgba(255, 255, 255, 0.12);
        
        --sf-text-main: #F0F6FC;
        --sf-text-muted: #8B949E;
        
        --sf-input-focus-bg: rgba(255, 255, 255, 0.1);
        --sf-input-bg: rgba(255, 255, 255, 0.04);
        --sf-border: rgba(255, 255, 255, 0.08);
        
        --sf-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
        --sf-color-glow: 0 15px 45px rgba(26, 92, 255, 0.4);

        --sf-btn-disabled-bg: rgba(255, 255, 255, 0.05);
        --sf-btn-disabled-text: rgba(255, 255, 255, 0.2);
        --sf-btn-hover: rgba(255, 255, 255, 0.06);
    }
}