/* ═══════════════════════════════════════════════════════════════════════════ VITALITY CORE — Design tokens Sistema Material 3 derivado del proyecto Stitch "Porciones de Intercambio". POR QUÉ LOS SETS VIVEN EN `body` Y NO EN `:root` ------------------------------------------------ Una custom property se resuelve en el scope DONDE SE DECLARA. El puente legacy (bloque 3) hace `--white: var(--on-surface)`. Si ese puente se declarase en `:root` mientras los sets viven en `body`, `--white` se computaría en con el set claro y NO cambiaría nunca al alternar el tema: texto oscuro sobre fondo oscuro. Sets y puente van en el mismo elemento. Como el toggle ya usa `body.dark` (js/app.js), ese elemento es `body`. ═══════════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────────────── 1. SETS DE TEMA ─────────────────────────────────────────────────────────────────────────── */ body { color-scheme: light; /* scrollbars, date/time pickers y controles nativos */ /* Superficies */ --surface: #f8f9fa; --surface-dim: #d9dadb; --surface-bright: #f8f9fa; --surface-container-lowest: #ffffff; --surface-container-low: #f3f4f5; --surface-container: #edeeef; --surface-container-high: #e7e8e9; --surface-container-highest: #e1e3e4; /* Contenido sobre superficie */ --on-surface: #191c1d; --on-surface-variant: #3e4942; /* Contornos: --outline para bordes FUNCIONALES (input, foco, botón ghost), --outline-variant solo para divisores decorativos. */ --outline: #6e7a72; --outline-variant: #bdcac0; /* Primario */ --primary: #006c48; --on-primary: #ffffff; --primary-container: #52b788; --on-primary-container: #00442c; --inverse-primary: #75daa8; /* Secundario / terciario */ --secondary: #2c694e; --on-secondary: #ffffff; --secondary-container: #aeeecb; --on-secondary-container: #316e52; --tertiary: #9a4246; --on-tertiary: #ffffff; --tertiary-container: #f18689; --on-tertiary-container: #6c1f26; /* Estrella de reseña. Más oscuro que en tema oscuro a propósito: sobre fondo claro el dorado brillante da 1,95:1 y WCAG 1.4.11 pide 3:1 para un gráfico que lleva información. */ --estrella: #a67c00; /* Error */ --error: #ba1a1a; --on-error: #ffffff; --error-container: #ffdad6; --on-error-container: #93000a; /* Inversos (snackbars, tooltips) */ --inverse-surface: #2e3132; --inverse-on-surface: #f0f1f2; /* ── Roles que M3 no trae pero la app sí necesita ──────────────────────── */ /* Destino de --accent-dark. Necesita ser un role token propio porque su valor correcto NO es el mismo en ambos temas y el puente se escribe una sola vez. */ --primary-strong: #005235; --primary-soft: rgba(0, 108, 72, 0.10); /* ex --green-pale */ --warning: #8a5300; --warning-container: #ffefc4; --on-warning-container: #4a2d00; --info: #1565c0; --info-container: #e8f4fd; --on-info-container: #0d3c61; --scrim: rgba(0, 0, 0, 0.32); /* Macros. --macro-lip corrige el #e8a317 de Stitch, que daba 2.17:1 sobre tarjeta blanca y no alcanzaba ni el mínimo 3:1 de elemento gráfico. #a86500 (4.64:1) es el tertiary-container del propio design system. */ --macro-cho: var(--secondary); --macro-prot: var(--tertiary); --macro-lip: #a86500; --macro-fibra: var(--primary); /* Chart.js. Van como rgba() literal, NO color-mix(): el string se pasa a ctx.fillStyle del canvas y color-mix no se resuelve ahí en WebKit antiguo, y sin build no hay fallback posible. */ --chart-grid: rgba(25, 28, 29, 0.08); --chart-fill: rgba(0, 108, 72, 0.12); --chart-1: #006c48; --chart-2: #9a4246; --chart-3: #2c694e; --chart-4: #a86500; --chart-5: #1565c0; --chart-6: #7b3fa0; --chart-7: #0f766e; /* Elevación: en claro, sombra real */ --elev-1: 0 1px 2px rgba(25, 28, 29, 0.06), 0 1px 3px rgba(25, 28, 29, 0.04); --elev-2: 0 2px 6px rgba(25, 28, 29, 0.08), 0 1px 2px rgba(25, 28, 29, 0.04); --elev-3: 0 8px 24px rgba(25, 28, 29, 0.12), 0 2px 6px rgba(25, 28, 29, 0.06); } body.dark { color-scheme: dark; --surface: #131313; --surface-dim: #131313; --surface-bright: #393939; --surface-container-lowest: #0e0e0e; --surface-container-low: #1c1b1b; --surface-container: #201f1f; --surface-container-high: #2a2a2a; --surface-container-highest: #353534; --on-surface: #e5e2e1; --on-surface-variant: #bdcac0; /* #4d5852 en vez del #3e4942 de Stitch: aquel daba 1.98:1 sobre --surface, divisores prácticamente invisibles. */ --outline: #88948b; --outline-variant: #4d5852; --primary: #75daa8; --on-primary: #003823; --primary-container: #52b788; --on-primary-container: #00442c; --inverse-primary: #006c48; --secondary: #c8c6c5; --on-secondary: #303030; --secondary-container: #474746; --on-secondary-container: #b7b5b4; --tertiary: #ffb3b3; --on-tertiary: #5e141c; --tertiary-container: #f18689; --on-tertiary-container: #6c1f26; --estrella: #e0b445; --error: #ffb4ab; --on-error: #690005; --error-container: #93000a; --on-error-container: #ffdad6; --inverse-surface: #e5e2e1; --inverse-on-surface: #313030; --primary-strong: #52b788; --primary-soft: rgba(117, 218, 168, 0.12); --warning: #ffb86b; --warning-container: #3a2e00; --on-warning-container: #ffddb0; --info: #8ab4f8; --info-container: #12283f; --on-info-container: #cfe2ff; --scrim: rgba(0, 0, 0, 0.60); --macro-cho: #aeeecb; /* --secondary aquí es gris neutro */ --macro-prot: var(--tertiary); --macro-lip: #ffb86b; --macro-fibra: var(--primary); --chart-grid: rgba(229, 226, 225, 0.10); --chart-fill: rgba(117, 218, 168, 0.14); --chart-1: #75daa8; --chart-2: #ffb3b3; --chart-3: #aeeecb; --chart-4: #ffb86b; --chart-5: #8ab4f8; --chart-6: #d7b3f0; --chart-7: #7fd6cb; /* En oscuro la profundidad se comunica con capas tonales, no con sombra */ --elev-1: 0 1px 2px rgba(0, 0, 0, 0.40); --elev-2: 0 2px 6px rgba(0, 0, 0, 0.48); --elev-3: 0 8px 24px rgba(0, 0, 0, 0.56); } /* ─────────────────────────────────────────────────────────────────────────── 2. TOKENS INVARIANTES (no dependen del tema) ─────────────────────────────────────────────────────────────────────────── */ :root { --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Tipografía (Inter). Shorthand: peso tamaño/interlineado familia */ --type-display: 700 48px/56px var(--font-sans); --type-headline-lg: 700 32px/40px var(--font-sans); --type-headline-mob: 700 28px/36px var(--font-sans); --type-headline-md: 600 24px/32px var(--font-sans); --type-headline-sm: 600 20px/28px var(--font-sans); --type-body-lg: 400 18px/28px var(--font-sans); --type-body-md: 400 16px/24px var(--font-sans); --type-body-sm: 400 14px/20px var(--font-sans); --type-label-md: 600 12px/16px var(--font-sans); --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-label: 0.05em; /* Espaciado — escala de 4px */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 40px; --space-7: 64px; --space-margin: 20px; /* margen lateral de pantalla en móvil */ /* Forma */ --radius-xs: 4px; --radius-s: 8px; --radius-m: 12px; --radius-full: 9999px; /* Capas. Hoy los z-index son mágicos (100 header, 200 modal, 300 drawer, 400 modal legal); el nav va por debajo del header y de los modales. */ --z-nav: 90; --z-header: 100; --z-modal: 200; --z-drawer: 300; --z-toast: 500; /* Movimiento */ --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 300ms; --ease-out: cubic-bezier(0.2, 0, 0, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); /* Altura del bottom nav (la usa el padding inferior del contenido) */ --nav-height: 64px; /* ESCALA DE BREAKPOINTS — convención, no tokens: @media no admite var(). max-width: 600px móvil (antes había 640 y 600) max-width: 480px móvil medio (los teléfonos reales van de 360 a 430) max-width: 400px móvil estrecho (antes había 400 y 380) min-width: 600px tablet en adelante No añadir valores nuevos: usar uno de estos cuatro. */ } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; } } /* El puente de compatibilidad con los tokens antiguos (--white, --gray-N, --accent, --green-*) se retiró: sus 656 referencias ya apuntan directamente a los roles de arriba. */