"""Gradio theme and CSS for the GigaCheck demo (pastel orange-red)."""

from __future__ import annotations

import gradio as gr

THEME = gr.themes.Soft(
    primary_hue=gr.themes.colors.red,
    secondary_hue=gr.themes.colors.orange,
    neutral_hue=gr.themes.colors.stone,
    font=(gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"),
)

CSS = """
:root {
  --gc-peach: #FFE3D5;
  --gc-coral: #FF8A65;
  --gc-red: #E5533C;
  --gc-deep: #C5402B;
  --gc-green: #2FA66B;
  --gc-ink: #3A2A24;
}
.gradio-container {
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#gc-header { text-align: center; margin: 0.4rem 0 1.2rem; }
#gc-header h1 {
  margin: 0; font-weight: 800; letter-spacing: -0.03em; font-size: 2.2rem;
  background: linear-gradient(110deg, var(--gc-coral) 0%, var(--gc-red) 55%, var(--gc-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#gc-header p { margin: 0.45rem 0 0; color: var(--gc-ink); opacity: 0.7; font-size: 1.02rem; }

.gc-lang-note {
  border-radius: 12px;
  padding: 10px 14px;
  margin: 0 0 6px;
  font-size: 0.9rem;
  color: var(--gc-deep);
  background: linear-gradient(135deg, rgba(255,227,213,0.85), rgba(255,138,101,0.22));
  border: 1px solid rgba(229,83,60,0.30);
}
.gc-lang-note b { font-weight: 700; }

.gc-counter { font-size: 0.82rem; opacity: 0.7; margin: 2px 4px 0; }
.gc-counter.gc-bad { color: var(--gc-red); opacity: 1; font-weight: 600; }

.gc-card {
  padding: 18px 20px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(229,83,60,0.22);
  box-shadow: 0 6px 22px rgba(229,83,60,0.08);
}

.gc-verdict { font-size: 1.25rem; font-weight: 700; margin-bottom: 14px; color: var(--gc-ink); }

.gc-bar {
  display: flex; width: 100%; height: 26px;
  border-radius: 999px; overflow: hidden;
  background: #f1ece9;
}
.gc-bar-human { background: var(--gc-green); height: 100%; transition: width 0.4s ease; }
.gc-bar-ai { background: var(--gc-red); height: 100%; transition: width 0.4s ease; }
.gc-bar-legend {
  display: flex; justify-content: space-between;
  margin-top: 8px; font-size: 0.9rem; font-weight: 600;
}
.gc-legend-human { color: var(--gc-green); }
.gc-legend-ai { color: var(--gc-red); }

.gc-summary { font-size: 0.95rem; font-weight: 600; margin-bottom: 12px; }
.gc-summary-ai { color: var(--gc-deep); }
.gc-summary-clean { color: var(--gc-green); }

.gc-text {
  white-space: pre-wrap; word-wrap: break-word; line-height: 1.65;
  font-size: 1.0rem; color: var(--gc-ink);
}
.gc-ai-span { border-radius: 4px; padding: 1px 1px; color: #2a160f; }

button.primary, .gradio-container .primary {
  background: linear-gradient(135deg, var(--gc-coral), var(--gc-red)) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}
button.primary:hover, .gradio-container .primary:hover {
  filter: brightness(1.05) saturate(1.08);
}
"""