# ========================= UI (predictor styling kept) =========================
CSS = """
/* ----- Base layout: light, high-contrast ----- */
.gradio-container {
    background: #f8fafc !important;              /* slate-50 */
    color: #0f172a !important;                    /* slate-900 */
    --card-bg: #ffffff;
    --card-brd: #e2e8f0;                          /* slate-200 */
}

/* Cards / groups / accordions */
.card, .gr-accordion, .gr-group, .gr-box {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-brd) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    border-radius: 14px !important;
}

/* Inputs: white background, dark text */
.gradio-container input, 
.gradio-container textarea, 
.gradio-container select, 
.gradio-container .gr-input, 
.gradio-container .gr-textbox textarea {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;         /* slate-300 */
}

/* Buttons */
.gradio-container button {
    font-weight: 700 !important;
}

/* ----- Label colors by component type (Blue / Green / Red) ----- */
/* Blue: text-like fields & sliders */
.gradio-container .gr-textbox label,
.gradio-container .gr-markdown h1,
.gradio-container .gr-markdown h2,
.gradio-container .gr-markdown h3,
.gradio-container .gr-slider label {
    color: #1d4ed8 !important;                    /* blue-700 */
    font-weight: 700 !important;
    text-shadow: 0 0 0.01px rgba(29,78,216,0.3);
}

/* Green: selections & toggles */
.gradio-container .gr-dropdown label,
.gradio-container .gr-checkbox label,
.gradio-container .gr-checkbox-group label {
    color: #166534 !important;                    /* green-800 */
    font-weight: 700 !important;
    text-shadow: 0 0 0.01px rgba(22,101,52,0.3);
}

/* Red: numeric/measurement inputs (to stand out) */
.gradio-container .gr-number label {
    color: #b91c1c !important;                    /* red-700 */
    font-weight: 800 !important;
    text-shadow: 0 0 0.01px rgba(185,28,28,0.25);
}

/* Secondary hint/info text under labels */
.gradio-container .label > .text-gray-500,
.gradio-container .label .secondary-text,
.gradio-container .gr-input .text-gray-500 {
    color: #334155 !important;                    /* slate-700 */
}

/* Tabs: clearer selected state */
.gradio-container .tabs .tabitem.selected {
    border-bottom: 3px solid #1d4ed8 !important;  /* blue underline */
    font-weight: 800 !important;
}

/* Chat bubbles: better contrast */
.gradio-container .message.user {
    background: #e0f2fe !important;               /* sky-100 */
    border: 1px solid #bae6fd !important;
    color: #0c4a6e !important;
}
.gradio-container .message.bot {
    background: #ecfdf5 !important;               /* emerald-50 */
    border: 1px solid #d1fae5 !important;
    color: #064e3b !important;
}

/* Sliders & focus states */
.gradio-container input:focus, 
.gradio-container textarea:focus, 
.gradio-container select:focus {
    outline: 2px solid #1d4ed8 !important;        /* blue focus ring */
    border-color: #1d4ed8 !important;
}

/* Headline block at top */
.gradio-container h1, .gradio-container .prose h1 {
    color: #0f172a !important;
}

/* Small bump to label size */
.gradio-container label {
    font-size: 0.98rem !important;
    letter-spacing: 0.1px;
}
"""

# Tailwind-like hues mapped into Gradio theme tokens
theme = gr.themes.Soft(
    primary_hue="blue",
    secondary_hue="green",
    neutral_hue="slate"
).set(
    body_background_fill="#f8fafc",
    body_text_color="#0f172a",
    input_background_fill="#ffffff",
    input_border_color="#cbd5e1",
    button_primary_background_fill="#1d4ed8",     # blue
    button_primary_text_color="#ffffff",
    button_secondary_background_fill="#16a34a",   # green
    button_secondary_text_color="#ffffff",
    radius_large="14px",
    spacing_size="8px"
)