app/theme.py

"""Editorial-warm light theme: typography, chrome CSS, chart styling.

Design read: a portfolio-grade NL→SQL product demo for technical
recruiters and data peers — calm, precise, editorial-warm (deliberately
*not* the blue/indigo SaaS default). Native Streamlit CSS, self-hosted
Manrope (UI + tabular figures, full Cyrillic) and JetBrains Mono (SQL).

Dials for this surface (it is a working tool, not a marketing page):
VARIANCE 4 · MOTION 2 (feedback-only transitions) · DENSITY 5.

System locks (taste pre-flight):
- Theme lock: light only.
- Colour lock: ONE accent — terracotta. No second hue anywhere.
- Shape lock: containers/cards/expanders 12px · inputs/buttons 8px ·
  chips + language pills full-pill.
- Shadows tinted to the warm ink, never pure black.
"""

from __future__ import annotations

from typing import Any

import streamlit as st

FONT_CSS = """
<style>
/* Self-hosted variable fonts (served via enableStaticServing). */
@font-face {
  font-family: 'Manrope';
  src: url('/app/static/fonts/manrope-latin.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074,
    U+20AC, U+2122, U+2190-2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Manrope';
  src: url('/app/static/fonts/manrope-cyrillic.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-04FF, U+0500-052F, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/app/static/fonts/jbmono-latin.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074,
    U+20AC, U+2122, U+2212, U+2215;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/app/static/fonts/jbmono-cyrillic.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-04FF, U+0500-052F, U+2116;
}

:root {
  --bg:            #FCFBF9;
  --surface:       #FFFFFF;
  --panel:         #F5F3EF;
  --panel-2:       #EDE9E1;
  --border:        #E7E3DB;
  --border-strong: #D8D2C6;
  --text:          #1C1A17;
  --text-soft:     #423D35;
  --text-mute:     #6F6A61;
  --accent:        #C2541B;   /* terracotta — fills, icons, key marks */
  --accent-hover:  #9E3F12;
  --accent-ink:    #9A3D11;   /* accent TEXT on paper (AA-safe) */
  --accent-soft:   #F7ECE3;
  --accent-ring:   rgba(194, 84, 27, 0.24);
  --radius:        12px;
  --radius-sm:     8px;
  --radius-pill:   999px;
  --shadow-sm:     0 1px 2px rgba(28, 26, 23, 0.05), 0 1px 3px rgba(28, 26, 23, 0.05);
  --shadow-md:     0 6px 18px rgba(28, 26, 23, 0.09);
  --font:          'Manrope', system-ui, -apple-system, sans-serif;
  --mono:          'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* legacy aliases */
  --ink: var(--text); --ink-soft: var(--text-soft); --ink-mute: var(--text-mute);
  --paper: var(--bg); --paper-warm: var(--panel); --rule: var(--border-strong);
  --hairline: var(--border);
}

html, body, .stApp, [data-testid="stAppViewContainer"],
.stMarkdown, .stMarkdown *, [data-testid="stMarkdownContainer"], [data-testid="stMarkdownContainer"] *,
.stChatMessage, [class*="css"], input, textarea, button, select,
[data-baseweb="select"] *, [data-baseweb="popover"] * {
  font-family: var(--font) !important;
}
.stApp, [data-testid="stAppViewContainer"] {
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.tabular, .nl-metric-value, [data-testid="stMetricValue"] {
  font-variant-numeric: tabular-nums;
}

.block-container, [data-testid="stMainBlockContainer"] {
  padding-top: 2.6rem;
  padding-bottom: 4rem;
  max-width: 1140px;
}

/* Hide Streamlit chrome we don't want */
#MainMenu, footer, [data-testid="stToolbar"], [data-testid="stDecoration"] {
  visibility: hidden;
}
/* Transparent fixed header still overlays the top bar — pass pointer
   events through to our controls, keep its own buttons live. */
[data-testid="stHeader"] { background: transparent !important; pointer-events: none; }
[data-testid="stHeader"] * { pointer-events: auto; }

/* Keyboard focus ring — accessibility, every interactive element */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
  border-radius: var(--radius-sm);
}

/* ---------- Sticky top bar ---------- */
.st-key-nl_topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 0.45rem 0 0.55rem 0;
  margin-bottom: 0.9rem;
}
.nl-wordmark {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.1;
  white-space: nowrap;
}
.nl-wordmark .arrow, .nl-display .arrow { color: var(--accent); margin: 0 0.04em; }
.nl-context {
  font-size: 0.8rem;
  color: var(--text-mute);
  margin: 0 0 1.6rem 0;
}
.nl-context a { color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid transparent; }
.nl-context a:hover { border-bottom-color: var(--accent-ink); }
.nl-context code {
  font-family: var(--mono) !important;
  background: var(--panel-2) !important;
  border: 0 !important;
  padding: 0.06rem 0.36rem !important;
  border-radius: 5px !important;
  font-size: 0.76rem !important;
  color: var(--text-soft) !important;
}

/* ---------- Hero ---------- */
.nl-display {
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--text);
  text-wrap: balance;
  margin: 0.5rem 0 0.5rem 0;
}
.nl-tagline {
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 60ch;
  text-wrap: pretty;
  margin: 0 0 1.9rem 0;
}

/* ---------- Stat cards ---------- */
.nl-kicker {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 0.55rem;
}
.nl-metric {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.15rem 1.3rem 1.35rem;
  height: 100%;
}
.nl-metric-row { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.5rem; }
.nl-metric-value {
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}
.nl-metric-aside {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
  padding: 0.14rem 0.6rem;
}
.nl-metric-cap { font-size: 0.86rem; color: var(--text-soft); line-height: 1.55; }

/* ---------- Methodology body (inside expander) ---------- */
.nl-method-body { font-size: 0.85rem; color: var(--text-soft); line-height: 1.62; }
.nl-term { border-bottom: 1px dotted var(--text-mute); cursor: help; color: inherit; }
.nl-term:hover { border-bottom-color: var(--accent); color: var(--accent-ink); }

/* ---------- Section label ---------- */
.nl-section-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 2.2rem 0 0.9rem 0;
}

/* ---------- Sample difficulty chip ---------- */
.nl-sample-kicker {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
  padding: 0.1rem 0.55rem;
  margin: 0 0 0.45rem 0.1rem;
}

/* ---------- Sidebar ---------- */
[data-testid="stSidebar"] { background: var(--panel) !important; border-right: 1px solid var(--border); }
[data-testid="stSidebar"] .block-container { padding-top: 1.4rem; }
[data-testid="stSidebar"] .nl-side-h {
  font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; margin: 0.2rem 0 1rem 0;
}
[data-testid="stSidebar"] .nl-side-h .arrow { color: var(--accent); }
[data-testid="stSidebar"] .nl-side-sub {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-mute); margin: 1.1rem 0 0.4rem 0;
}

/* ---------- Buttons (sample cards + generic) ---------- */
.stButton > button {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-sm);
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  text-align: left !important;
  padding: 0.6rem 0.8rem !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  height: auto !important;
  min-height: 0 !important;
  transition: border-color .14s, background .14s, box-shadow .14s, transform .14s;
}
.stButton > button:hover {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
  color: var(--accent-ink) !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.stButton > button:active { transform: translateY(0) scale(0.992); box-shadow: var(--shadow-sm); }
.stButton > button p { color: inherit !important; font-weight: 500 !important; }

/* Primary button (active language) — accent fill, AA white text */
.stButton > button[data-testid="stBaseButton-primary"] {
  background: var(--accent) !important; color: #fff !important;
  border-color: var(--accent) !important; box-shadow: none !important;
}
.stButton > button[data-testid="stBaseButton-primary"]:hover {
  background: var(--accent-hover) !important; color: #fff !important;
  border-color: var(--accent-hover) !important; transform: none !important;
}

/* Language pills (EN · RU) — compact, centred */
.st-key-lang_en_btn .stButton > button,
.st-key-lang_ru_btn .stButton > button {
  text-align: center !important;
  padding: 0.56rem 0.2rem !important;
  font-size: 0.76rem !important; font-weight: 600 !important; letter-spacing: 0.08em !important;
  box-shadow: none !important; transform: none !important;
}
.st-key-lang_en_btn .stButton > button:hover,
.st-key-lang_ru_btn .stButton > button:hover { transform: none !important; }

/* Clear-chat — quiet full-width action */
.st-key-clear_chat_btn .stButton > button {
  text-align: center !important; color: var(--text-soft) !important;
  box-shadow: none !important; font-weight: 500 !important;
}

/* ---------- Selectbox ---------- */
[data-baseweb="select"] > div {
  background: var(--surface) !important;
  border-radius: var(--radius-sm) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-sm);
  min-height: 2.5rem;
}
[data-baseweb="select"] > div:hover { border-color: var(--border-strong) !important; }
[data-baseweb="select"] > div:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-ring) !important;
}
[data-baseweb="menu"] [role="option"]:hover { background: var(--accent-soft) !important; }

/* Sliders / checkboxes accent */
[data-testid="stSlider"] [role="slider"] { background: var(--accent) !important; }
[data-baseweb="checkbox"] [data-checked="true"] { background: var(--accent) !important; border-color: var(--accent) !important; }

/* ---------- Chat input ---------- */
[data-testid="stChatInput"] {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm);
  background: var(--surface) !important;
}
[data-testid="stChatInput"]:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-ring) !important;
}
[data-testid="stChatInput"] textarea { font-size: 1rem !important; color: var(--text) !important; background: transparent !important; }
[data-testid="stChatInput"] textarea::placeholder { color: var(--text-mute) !important; }
[data-testid="stChatInput"] button { background: var(--accent) !important; border-radius: var(--radius-sm) !important; color: #fff !important; }
[data-testid="stChatInput"] button:hover { background: var(--accent-hover) !important; }

/* ---------- Code ---------- */
pre, code, .stMarkdown code, .stMarkdown pre,
[data-testid="stCode"], [data-testid="stCode"] * { font-family: var(--mono) !important; }
[data-testid="stCode"], pre {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
}

/* ---------- Metric (scalar answer) ---------- */
[data-testid="stMetric"] {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.2rem !important;
}
[data-testid="stMetricLabel"] {
  font-size: 0.7rem !important; font-weight: 600 !important; letter-spacing: 0.1em !important;
  text-transform: uppercase !important; color: var(--text-mute) !important;
}
[data-testid="stMetricValue"] { font-weight: 800 !important; font-size: 2.2rem !important; color: var(--text) !important; }

/* ---------- Tables ---------- */
[data-testid="stDataFrame"] { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }

/* ---------- Expanders ---------- */
[data-testid="stExpander"] {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-sm);
}
[data-testid="stExpander"] summary, .streamlit-expanderHeader {
  font-size: 0.82rem !important; font-weight: 600 !important; color: var(--text) !important;
}
[data-testid="stExpander"] summary:hover { color: var(--accent-ink) !important; }

/* ---------- Chat messages ---------- */
[data-testid="stChatMessage"] { background: transparent !important; border: 0 !important; padding: 0.4rem 0 1.4rem 0 !important; }
[data-testid="stChatMessage"]:not(:first-child) { border-top: 1px solid var(--border) !important; padding-top: 1.4rem !important; }
[data-testid="stChatMessage"] > div:first-child,
[data-testid="chatAvatarIcon-user"], [data-testid="chatAvatarIcon-assistant"],
[data-testid="stChatMessageAvatarUser"], [data-testid="stChatMessageAvatarAssistant"],
[data-testid="stChatMessage"] [class*="Avatar"] { display: none !important; }
[data-testid="stChatMessage"] > div:nth-child(2) { margin-left: 0 !important; padding-left: 0 !important; width: 100% !important; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-mute); }
</style>
"""


CHART_PALETTE = ["#C2541B", "#1C1A17", "#9E3F12", "#6F6A61", "#D8862E"]


def inject_chrome() -> None:
    st.markdown(FONT_CSS, unsafe_allow_html=True)


def style_fig(fig: Any) -> Any:
    fig.update_layout(
        font_family="Manrope, system-ui, sans-serif",
        font_color="#1C1A17",
        paper_bgcolor="#FFFFFF",
        plot_bgcolor="#FFFFFF",
        colorway=CHART_PALETTE,
        margin=dict(l=10, r=10, t=20, b=10),
    )
    fig.update_xaxes(gridcolor="#EDE9E1", zerolinecolor="#D8D2C6", tickcolor="#D8D2C6")
    fig.update_yaxes(gridcolor="#EDE9E1", zerolinecolor="#D8D2C6", tickcolor="#D8D2C6")
    return fig