/* Design tokens — single source of truth for the blog (Django) and the app * (React, frontend/src/theme/tokens.ts must mirror these exact values, * FR-013 / 006-blog-server-render T033). Ported from * claude-design/project/theme.js via frontend/src/theme/tokens.ts. * * Theme switching: JS toggles [data-theme] on (static/blog/js/theme.js), * same mechanism as the React ThemeProvider (data-theme + CSS variables). */ :root[data-theme="light"] { --bg: #eaecee; --frame: #f6f7f8; --surface: #ffffff; --surface2: #f6f7f8; --surface3: #f0f2f4; --border: #eaecef; --border2: #e5e8eb; --border3: #e4e7ea; --track: #e6e8eb; --t1: #1c2124; --t2: #3f464a; --t3: #6e767b; --t4: #9aa1a6; --t5: #a6adb1; --greenTx: #0f9e6e; --chipBorder: #b9decb; --chipBg: #ffffff; --shadowLg: rgba(20, 26, 30, 0.42); --shadowMd: rgba(20, 26, 30, 0.32); --green: #12b981; --yellow: #ffc24b; /* Brand accents for two content blocks that are NOT category-driven: the * step-gain pill and the verdict card (011-editable-categories FR-006). * Both used to borrow --cat-optim-*, which tied the look of every article * body to whichever category happened to be called "optimización". Same * hex values as those tokens had, so the change is visually nil. */ --gainTx: #0c7b57; --gainBg: #d6f3e7; --verdictBg: linear-gradient(135deg, #e7f5ee, #d2efe1); } :root[data-theme="dark"] { --bg: #111214; --frame: #191a1d; --surface: #1e2023; --surface2: #25272b; --surface3: #2b2e32; --border: #2e3136; --border2: #34383d; --border3: #34383d; --track: #2c2f34; --t1: #eeeff1; --t2: #c2c5c9; --t3: #969aa0; --t4: #6d7177; --t5: #63676d; --greenTx: #35d6a0; --chipBorder: #2e5a47; --chipBg: #1b1d20; --shadowLg: rgba(0, 0, 0, 0.6); --shadowMd: rgba(0, 0, 0, 0.5); --green: #12b981; --yellow: #ffc24b; --gainTx: #6fe0ba; --gainBg: rgba(53, 214, 160, 0.14); --verdictBg: linear-gradient(135deg, #173229, #1e3b30); } /* Typography — self-hosted, same pair as the app (frontend/src/index.css). * Both faces ship as single variable woff2 files (latin subset only — content * language is Spanish, LANGUAGE_CODE=es) covering the full weight range used * across the blog (400-800), so one @font-face per family is enough — no * per-weight files, no Google Fonts @import (that's a render-blocking extra * hop: parse CSS, discover the font, then fetch it). */ @font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/bricolage-grotesque-variable-latin.c47ac31e5437.woff2") format("woff2"); } @font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/hanken-grotesk-variable-latin.a6b899943e31.woff2") format("woff2"); } :root { --font-heading: "Bricolage Grotesque", sans-serif; --font-body: "Hanken Grotesk", sans-serif; }