/* ============================================================================
MADRIDONOMY DESIGN TOKENS
Single source of truth for both the public Jinja site and the React admin.
Two first-class themes, named for the club:
NOCTURNO — the Bernabéu under floodlights (dark). Default.
BLANCO — the home kit (light). Los Blancos.
Theme is selected by `data-theme` on :
or
Set before first paint by the inline script in base.html (no flash).
NOTE ON GOLD: #C5A059 fails WCAG AA as text on a light background
(~2.3:1). In Blanco, --gold is darkened to #8D6C32 for text/links while
--gold-accent keeps the brighter value for fills, rules and badges.
Never use --gold-accent for body text in Blanco.
========================================================================= */
:root,
[data-theme='nocturno'] {
/* Surfaces */
--bg: #0B0C10;
--surface: #14161B;
--surface-raised: #1F2833;
--surface-hover: #252D38;
--border: #2A2E38;
--hairline: #1C2027;
/* Text — warm off-white, never pure #FFF (harsh on near-black) */
--text: #F5F3EF;
--text-secondary: #A8ACB4;
--text-muted: #6E737C;
/* Brand */
--gold: #C5A059; /* text-safe on dark */
--gold-accent: #C5A059; /* fills, rules, badges */
--gold-bright: #E3C88A; /* hover / emphasis */
--gold-dim: #8D6C32;
/* Status */
--positive: #3F9D57;
--negative: #D9534F;
--warning: #C9932F;
/* Matchday Rail — stays dark in BOTH themes, like a real scoreboard */
--rail-bg: #0B0C10;
--rail-text: #F5F3EF;
--rail-border: #2A2E38;
color-scheme: dark;
}
[data-theme='blanco'] {
/* Surfaces — warm white, like uncoated stock. Not grey, not cream. */
--bg: #FBFAF7;
--surface: #FFFFFF;
--surface-raised: #F3F1EC;
--surface-hover: #EDEAE3;
--border: #E2DFD8;
--hairline: #EDEAE3;
/* Text */
--text: #0B0C10;
--text-secondary: #4A4F57;
--text-muted: #83888F;
/* Brand — see WCAG note above */
--gold: #8D6C32;
--gold-accent: #C5A059;
--gold-bright: #6F5527;
--gold-dim: #C5A059;
/* Status — darkened for contrast on light */
--positive: #2E7D45;
--negative: #C0392B;
--warning: #8A6516;
/* Rail stays dark */
--rail-bg: #0B0C10;
--rail-text: #F5F3EF;
--rail-border: #2A2E38;
color-scheme: light;
}
/* Respect system preference only when the user has made no explicit choice.
The init script writes data-theme, so this is the pre-choice default. */
@media (prefers-color-scheme: light) {
:root:not([data-theme]) {
--bg: #FBFAF7;
--surface: #FFFFFF;
--surface-raised: #F3F1EC;
--surface-hover: #EDEAE3;
--border: #E2DFD8;
--hairline: #EDEAE3;
--text: #0B0C10;
--text-secondary: #4A4F57;
--text-muted: #83888F;
--gold: #8D6C32;
--gold-accent: #C5A059;
--gold-bright: #6F5527;
--gold-dim: #C5A059;
--positive: #2E7D45;
--negative: #C0392B;
--warning: #8A6516;
color-scheme: light;
}
}
/* ── Typography ──────────────────────────────────────────────────────────
display — Archivo Narrow: condensed, heavy. Headlines, section titles.
body — Newsreader: serif reading face. Article copy, excerpts.
data — IBM Plex Mono: TABULAR figures. Scores, tables, squad numbers,
timestamps, eyebrows. Numbers must align in columns.
---------------------------------------------------------------------- */
:root {
--font-display: 'Archivo Narrow', system-ui, sans-serif;
--font-body: 'Newsreader', Georgia, serif;
--font-data: 'IBM Plex Mono', ui-monospace, monospace;
/* Type scale (desktop) */
--text-display-xl: 56px;
--text-display-lg: 40px;
--text-display-md: 28px;
--text-display-sm: 20px;
--text-body-lg: 19px;
--text-body-md: 15px;
--text-caption: 13px;
--text-eyebrow: 11px;
--text-data-xl: 44px;
--text-data-md: 14px;
/* Layout */
--container-max: 1200px;
--measure: 680px; /* article reading column */
--rail-height: 56px;
--space: 8px;
/* Shape — severe and architectural. 4px is the ceiling. */
--radius-sm: 2px;
--radius: 4px;
}
@media (max-width: 768px) {
:root {
--text-display-xl: 36px;
--text-display-lg: 30px;
--text-display-md: 24px;
--text-data-xl: 32px;
}
}
/* ── Base ────────────────────────────────────────────────────────────── */
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
}
/* Tabular figures wherever data lives — this is what makes tables trustworthy */
.font-data,
table td,
table th {
font-family: var(--font-data);
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
}
/* Eyebrows / labels */
.eyebrow {
font-family: var(--font-data);
font-size: var(--text-eyebrow);
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--gold);
}
/* Focus — visible, gold, never removed */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--gold-accent);
outline-offset: 2px;
}
/* ── Article prose ───────────────────────────────────────────────────────
Styles raw HTML from the content pipeline (Gemini-generated /
/
etc). No Tailwind typography plugin is loaded, so this is
hand-written rather than @apply prose. Scoped to .article-prose so it
never leaks into UI chrome.
---------------------------------------------------------------------- */
.article-prose {
font-family: var(--font-body);
font-size: var(--text-body-lg);
line-height: 1.7;
color: var(--text-secondary);
max-width: var(--measure);
}
.article-prose p { margin: 0 0 24px; }
.article-prose h2 {
font-family: var(--font-display);
font-size: var(--text-display-sm);
color: var(--text);
text-transform: none;
margin: 40px 0 16px;
}
.article-prose h3 {
font-family: var(--font-display);
font-size: 18px;
color: var(--text);
margin: 32px 0 12px;
}
.article-prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.article-prose strong { color: var(--text); font-weight: 600; }
/* Pull quotes: left-aligned with a gold rule, never centred, never in
quotation marks — matches the Stitch article mockup exactly. */
.article-prose blockquote {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
line-height: 1.35;
color: var(--text);
border-left: 2px solid var(--gold-accent);
padding-left: 20px;
margin: 32px 0;
text-align: left;
}
.article-prose img {
max-width: 100%;
border-radius: var(--radius);
margin: 24px 0;
}
.article-prose ul, .article-prose ol { margin: 0 0 24px; padding-left: 24px; }
.article-prose li { margin-bottom: 8px; }
/* Theme transition, but never fight a user who asked for less motion */
@media (prefers-reduced-motion: no-preference) {
body,
.themed-surface {
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
}