import gradio as gr

# A soft, modern theme overriding Gradio's default harsh borders
theme = gr.themes.Soft(
    primary_hue="emerald",
    neutral_hue="slate",
    font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"],
    radius_size=gr.themes.sizes.radius_xxl,
).set(
    body_background_fill="#f7f9fc", 
    block_background_fill="#ffffff",
    block_border_width="0px",
    block_shadow="0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05)",
    button_primary_background_fill="*primary_500",
    button_primary_background_fill_hover="*primary_600"
)

# Custom CSS for your injected HTML components to match the mockups
CSS = """
/* Global Container Resets */
.gradio-container {
    max-width: 1200px !important;
    margin: auto;
}

/* Safe way to add button shadows without breaking Python */
button.primary {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1) !important;
}

/* Card Styling (Inspired by the pastel app mockup) */
.glass-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.03);
    margin-bottom: 16px;
    transition: transform 0.2s ease;
}

/* Nutrition Pills (Inspired by the green salad mockup) */
.nutrition-row {
    display: flex;
    gap: 12px;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 10px;
}
.pill-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #e6f4ea; /* Light sage green */
    color: #1e4620; /* Dark green text */
    border-radius: 40px;
    padding: 16px 20px;
    min-width: 80px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}
.pill-value {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 4px;
}
.pill-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Dish Proposal Cards */
.dish-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 10px;
}
.dish-card {
    background: linear-gradient(135deg, #f0fff4 0%, #e6fffa 100%);
    border-radius: 20px;
    padding: 16px;
    text-align: center;
    border: 1px solid #c6f6d5;
}
.dish-card h4 {
    margin: 0 0 8px 0;
    font-size: 18px;
    color: #2d3748;
}

/* Hero Image Header (Inspired by the spaghetti mockup) */
.hero-container {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.hero-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}
.hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding: 30px 20px 20px;
    color: white;
}
.hero-overlay h2 {
    margin: 0;
    font-size: 32px;
    font-weight: 800;
    color: white;
}

/* Ingredient Chips */
.chip-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.chip {
    background: #edf2f7;
    color: #4a5568;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}
"""