static/css/_variables.css

/* ─────────────────────────────────────────────────────────────────────────
 * Design tokens (custom properties)
 *
 * Two layers:
 *   1. ``--hy-*``  : our own palette — referenced from component CSS.
 *   2. ``--*-*-*`` : Gradio's built-in tokens — overridden so Gradio's
 *                    components match the rest of the UI.
 *
 * If you want to retheme HY3, change values here and (almost) nowhere else.
 * ───────────────────────────────────────────────────────────────────────── */

:root, .gradio-container {
    /* Hy3 palette (light) */
    --hy-bg:            #ffffff;
    --hy-bg-soft:       #fafafa;
    --hy-bg-muted:      #f5f5f7;
    --hy-text:          #222222;
    --hy-text-strong:   #111111;
    --hy-text-muted:    #666666;
    --hy-border:        #e5e7eb;
    --hy-border-strong: #d1d1d6;
    --hy-accent:        #2563eb;
    --hy-accent-hover:  #1d4ed8;
    --hy-accent-soft:   #dbeafe;
    --hy-shadow:        0 1px 4px rgba(0, 0, 0, 0.06);

    /* Gradio framework overrides (light) */
    --body-background-fill: var(--hy-bg) !important;
    --block-background-fill: var(--hy-bg) !important;
    --block-shadow: none !important;
    --block-border-color: transparent !important;
    --input-border-width: 1px !important;
    --input-border-color: var(--hy-border) !important;
    --color-accent: var(--hy-accent) !important;
    --color-accent-soft: var(--hy-accent-soft) !important;
    --button-primary-background-fill: var(--hy-accent) !important;
    --button-primary-background-fill-hover: var(--hy-accent-hover) !important;
    --button-primary-text-color: #ffffff !important;
    --slider-color: var(--hy-accent) !important;
    --neutral-200: var(--hy-border) !important;
}

/* Hy3 palette (dark) + matching Gradio overrides */
.dark {
    --hy-bg:            #171717;
    --hy-bg-soft:       #1f1f1f;
    --hy-bg-muted:      #2a2a2a;
    --hy-text:          #e8e8e8;
    --hy-text-strong:   #ffffff;
    --hy-text-muted:    #909090;
    --hy-border:        #2a2a2a;
    --hy-border-strong: #3a3a3a;
    --hy-accent:        #6b9fff;
    --hy-accent-hover:  #4b8df8;
    --hy-accent-soft:   #1a2a3d;
    --hy-shadow:        0 1px 4px rgba(0, 0, 0, 0.3);

    --body-background-fill: var(--hy-bg) !important;
    --block-background-fill: var(--hy-bg-soft) !important;
    --block-shadow: none !important;
    --block-border-color: var(--hy-border) !important;
    --input-border-width: 1px !important;
    --input-border-color: var(--hy-border-strong) !important;
    --color-accent: var(--hy-accent) !important;
    --color-accent-soft: var(--hy-accent-soft) !important;
    --button-primary-background-fill: var(--hy-accent-hover) !important;
    --button-primary-background-fill-hover: #3a7ce6 !important;
    --button-primary-text-color: #ffffff !important;
    --slider-color: var(--hy-accent) !important;
    --neutral-200: var(--hy-border) !important;
    --body-text-color: var(--hy-text) !important;
    --block-label-text-color: #c0c0c0 !important;
    --block-title-text-color: #e0e0e0 !important;
    --input-background-fill: var(--hy-bg-muted) !important;
    --background-fill-secondary: var(--hy-bg-soft) !important;
    --background-fill-primary: var(--hy-bg) !important;
    --border-color-primary: var(--hy-border) !important;
    --panel-background-fill: var(--hy-bg-soft) !important;
    --checkbox-background-color: var(--hy-bg-muted) !important;
    --checkbox-label-background-fill: var(--hy-bg-soft) !important;
}