"""One dark theme, defined once, used by both the local app and the Space.

Gradio decides light or dark from the visitor's browser unless it is told
otherwise, and an earlier version of this app painted a dark background in CSS
while passing a light theme - so Gradio drew white inputs and the stylesheet
wrote near-white text onto them. Nothing was readable, including the error
toasts that would have explained it.

The fix is to stop having two opinions. Every colour below is set for both the
light and the dark variant, so the page looks the same whichever the browser
asks for, and the stylesheet never has to override a theme colour.
"""

import gradio as gr

INK = "#0b0e14"          # page
PANEL = "#141a25"        # cards, inputs
RAISED = "#1b2331"       # hover, secondary buttons
LINE = "#28324a"         # borders
TEXT = "#e9edf7"
DIM = "#94a3bb"
ORANGE = "#f2794a"
ORANGE_HI = "#ff9366"
VIOLET = "#b46cf0"


def _both(**pairs):
    """Give light and dark the same value, so mode never changes the look."""
    out = {}
    for key, value in pairs.items():
        out[key] = value
        out[key + "_dark"] = value
    return out


def build():
    theme = gr.themes.Base(
        primary_hue=gr.themes.colors.orange,
        secondary_hue=gr.themes.colors.purple,
        neutral_hue=gr.themes.colors.slate,
        font=(gr.themes.GoogleFont("Outfit"), "ui-sans-serif", "system-ui",
              "sans-serif"),
        font_mono=(gr.themes.GoogleFont("JetBrains Mono"), "ui-monospace",
                   "monospace"),
    )
    return theme.set(
        **_both(
            body_background_fill=INK,
            body_text_color=TEXT,
            body_text_color_subdued=DIM,
            background_fill_primary=INK,
            background_fill_secondary=PANEL,
            block_background_fill=PANEL,
            block_border_color=LINE,
            panel_background_fill=PANEL,
            panel_border_color=LINE,
            border_color_primary=LINE,
            border_color_accent=ORANGE,
            # Labels as quiet text rather than the theme's default filled
            # pills: with ten fields on screen the pills read as ten warnings.
            block_label_background_fill="transparent",
            block_label_text_color=DIM,
            block_title_text_color=DIM,
            block_info_text_color=DIM,
            input_background_fill=INK,
            input_border_color=LINE,
            input_border_color_focus=ORANGE,
            input_placeholder_color="#5b6780",
            button_primary_background_fill=(
                f"linear-gradient(96deg, {ORANGE}, #e0603a)"),
            button_primary_background_fill_hover=(
                f"linear-gradient(96deg, {ORANGE_HI}, {ORANGE})"),
            button_primary_text_color="#1a0f08",
            button_secondary_background_fill=RAISED,
            button_secondary_border_color=LINE,
            button_secondary_text_color=TEXT,
            link_text_color=ORANGE,
            table_odd_background_fill=RAISED,
            error_background_fill="#2b1418",
            error_text_color="#ffb4a2",
        ),
        block_label_text_weight="600",
        block_title_text_weight="600",
        block_label_text_size="*text_sm",
        block_label_border_width="0px",
        block_border_width="1px",
        block_radius="14px",
        input_radius="10px",
        button_large_radius="12px",
        block_shadow="none",
        input_shadow="none",
    )