/* ========================================================================= TEMA: JAbeFIT (cálido) — la identidad visual por defecto. ARQUITECTURA: este archivo es un "skin" intercambiable. Define SOLO tokens (paleta, tipografía, radios, densidad) + el wordmark. La estructura/layout vive en app.css y consume estas variables vía var(--token). Para crear un tema nuevo (ej. "full Fitplan"): 1. Copiar este archivo a theme-.css 2. Cambiar SOLO los valores de los tokens (no hace falta tocar app.css) 3. Servirlo con la variable de entorno THEME= El conjunto de tokens es el CONTRATO: un tema debe definirlos todos. ========================================================================= */ /* Fuentes de marca (OFL, locales) para el wordmark. */ @font-face { font-family: "Archivo Black"; src: url("/static/fonts/ArchivoBlack-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Great Vibes"; src: url("/static/fonts/GreatVibes-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* Paleta JAbeFIT: verde oliva + crema + terracota. */ --paper: #ebe7db; /* fondo crema cálido */ --surface: #f5f2e9; /* cards, un punto más luminoso */ --surface-2: #e2dcca; /* hover / relieve sutil */ --ink: #33321e; /* verde oliva muy oscuro (texto + fondos oscuros) */ --ink-soft: #5f5d44; --ink-faint: #948f76; --line: #d9d2c0; --line-strong: #c4bca4; --olive: #5e5d40; /* verde oliva de marca (topbar) */ --olive-deep: #4a4931; --on-olive: #f1ede0; /* texto sobre el oliva */ --accent: #a05c34; /* terracota de marca (CTAs, badges, activo) */ --accent-deep: #874c29; --on-accent: #f6f1e7; --good: #4f7a48; /* verde "hecho" — armoniza con el oliva */ --good-bg: #e4ecdc; --on-dark: #ffffff; /* texto sobre fondos absolutos (timers, badges) */ --font-ui: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; --font-num: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace; --r: 5px; --r-lg: 9px; --pad: 16px; --maxw: 880px; --shadow: 0 1px 0 rgba(24,22,15,.04); /* Degradado del banner del día (funde la foto con el fondo). */ --banner-scrim: rgba(46, 44, 28, .96); } /* Modo oscuro: se activa con data-theme="dark" en . El script inline del lo resuelve antes de pintar según la preferencia guardada (Automático / Claro / Oscuro). "Automático" = sigue al sistema. */ :root[data-theme="dark"] { --paper: #14130c; --surface: #1d1b12; --surface-2: #282518; --ink: #ece7d5; --ink-soft: #b3ad96; --ink-faint: #837d66; --line: #322f20; --line-strong: #47432d; --olive: #565536; --olive-deep: #424126; --on-olive: #f1ede0; --accent: #c2784b; --accent-deep: #a05c34; --on-accent: #15120c; --good: #7fae6f; --good-bg: #1f2a1a; --on-dark: #ffffff; --shadow: none; }