config/themes.py

# config/themes.py
"""UI Themes and styling configurations"""

THEMES = {
    "default": {
        "primary_color": "#4CAF50",
        "background_color": "#ffffff",
        "secondary_background_color": "#f0f2f6",
        "text_color": "#262730",
        "font": "sans serif",
    },
    "dark": {
        "primary_color": "#00D4FF",
        "background_color": "#0E1117",
        "secondary_background_color": "#262730",
        "text_color": "#FAFAFA",
        "font": "sans serif",
    },
    "ocean": {
        "primary_color": "#006994",
        "background_color": "#E6F3F7",
        "secondary_background_color": "#B8E0ED",
        "text_color": "#003D5C",
        "font": "sans serif",
    },
    "sunset": {
        "primary_color": "#FF6B6B",
        "background_color": "#FFF5F5",
        "secondary_background_color": "#FFE0E0",
        "text_color": "#4A0E0E",
        "font": "sans serif",
    },
    "forest": {
        "primary_color": "#2D6A4F",
        "background_color": "#F3FFF8",
        "secondary_background_color": "#D8F3DC",
        "text_color": "#1B4332",
        "font": "sans serif",
    },
}

MOBILE_BREAKPOINT = 768  # pixels

# Component specific styles
COMPONENT_STYLES = {
    "quiz_card": {
        "border_radius": "20px",
        "padding": "30px",
        "shadow": "0 8px 32px rgba(0,0,0,0.1)",
        "transition": "all 0.3s ease",
    },
    "button": {
        "border_radius": "30px",
        "padding": "12px 24px",
        "font_weight": "600",
        "transition": "all 0.3s ease",
    },
    "stat_card": {
        "border_radius": "16px",
        "padding": "24px",
        "shadow": "0 4px 20px rgba(0,0,0,0.08)",
    },
}

# Animation settings
ANIMATIONS = {
    "fade_in": {"duration": "0.5s", "timing": "ease-out"},
    "slide_up": {"duration": "0.3s", "timing": "ease-out"},
    "pulse": {"duration": "1s", "timing": "ease-in-out"},
}