# monolith_theme.py
import gradio as gr

class MonolithTheme(gr.Theme):
    base = "dark"
    primary_color = "#150535"  # Dark purple used in .hero background
    secondary_color = "#414141"  # Light metallic gray
    accent_color = "#7b2ff7"  # Purple accent color from .button background
    text_color = "#FFFFFF"  # Bright white for high readability
    background_color = "#000000"  # Deep space black
    input_background_color = "#2A2A2A"
    output_background_color = "#2A2A2A"
    button_color = "#7b2ff7"  # Purple button color from .button background
    button_hover_color = "#9b4dff"  # Lighter purple on hover from .ctaButton:hover
    button_text_color = "#FFFFFF"
    font = "'Inter', sans-serif"  # Font from the body style in Hero.module.css
    font_size = "16px"
    border_radius = "30px"  # Rounded edges for buttons from .button
    transition = "transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease"
    text_box_shadow = "0 2px 4px rgba(0, 0, 0, 0.5)"  # Text shadow from .subtitle
    button_box_shadow = "0 4px 14px 0 rgba(0, 0, 0, 0.11)"  # Shadow from .button
    container_box_shadow = "0 4px 10px rgba(0, 0, 0, 0.5)"  # Shadow from .dramaticSection

    
    custom_css = """
    :root {
        --color-background: var(--primary-color);
        --color-text: var(--text-color);
        --color-hover: var(--accent-color);
        --button-background-color: var(--button-color);
        --button-text-color: var(--button-text-color);
        --button-hover-background-color: var(--button-hover-color);
        --button-hover-text-color: var(--primary-color);
        --border-radius: var(--border-radius);
    }
    body {
        font-family: var(--font);
        background-image: url('starfield.png'); /* A starfield background image */
        background-size: cover;
    }
    .gr-button, .gr-button:active, .gr-button:hover, .gr-button:focus {
        background-color: var(--button-background-color);
        color: var(--button-text-color);
        border: 1px solid var(--accent-color);
        box-shadow: var(--button-box-shadow);
        transition: var(--transition);
    }
    .gr-button:hover {
        background-color: var(--button-hover-background-color);
        color: var(--button-hover-text-color);
        box-shadow: none;
    }
    .gr-textbox, .gr-textbox:focus {
        border: 1px solid var(--secondary-color);
        box-shadow: var(--text-box-shadow);
    }
    .gr-output-container {
        border: 1px solid var(--secondary-color);
        box-shadow: var(--container-box-shadow);
    }
    .gr-example-container {
        border-top: 1px solid var(--secondary-color);
    }
    """



# Instantiate your custom theme
# theme = MonolithTheme()
# Use the custom theme in a Gradio app