/* ========================================================================== tadolia · base visual v1 · tokens 22 oct 2026 · Estado: confirmado (marca, colores, tipografía), propuesto (escalas y componentes) Uso: incluir este archivo antes de los estilos de la app. Las rutas de fuentes son relativas a esta carpeta (tokens/ → fonts/). ========================================================================== */ /* ---------- Fuentes (alojadas localmente, licencia SIL OFL 1.1) ---------- */ @font-face { font-family: "Outfit"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("fonts/outfit/outfit-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Outfit"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("fonts/outfit/outfit-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("fonts/archivo/archivo-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("fonts/archivo/archivo-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Archivo"; font-style: italic; font-display: swap; font-weight: 100 900; src: url("fonts/archivo/archivo-latin-wght-italic.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Archivo"; font-style: italic; font-display: swap; font-weight: 100 900; src: url("fonts/archivo/archivo-latin-ext-wght-italic.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ---------- Color · paleta 2 mejorada (confirmada) ---------- */ --tdl-noche: #1A2238; /* textos, fondos oscuros · 14,9:1 sobre hueso */ --tdl-hueso: #FAF8F4; /* fondo principal de la app */ --tdl-blanco: #FFFFFF; /* superficies: tarjetas, campos */ --tdl-anil: #3D3FC2; /* acción principal, emblema · blanco encima 7,8:1 */ --tdl-anil-oscuro: #2C2E96; /* hover / presionado de la acción principal */ --tdl-anil-suave: #EAE9FB; /* superficies de producto, chips, ayudas */ --tdl-anil-tenue: #D6D5F3; /* barras de avance pendientes, rayados de imágenes vacías */ --tdl-coral: #FF7357; /* acento de marca, emblema sobre noche · texto noche encima 5,9:1 */ --tdl-coral-tierra: #B33F27; /* enlaces y acción secundaria con texto · 5,4:1 sobre hueso */ --tdl-coral-suave: #FFE7DF; /* avisos no críticos, destacados */ --tdl-pizarra: #596075; /* texto secundario · 5,9:1 sobre hueso */ --tdl-texto-2: #3A4258; /* párrafos de apoyo · 9,4:1 sobre hueso */ --tdl-arena: #EEECE7; /* superficie alternativa, controles segmentados */ --tdl-borde: #E6E3DC; /* bordes decorativos de tarjetas (no delimitan controles) */ --tdl-borde-campo: #8A8EA0; /* borde de campos y casillas · 3,25:1 sobre blanco (mínimo 3:1) */ --tdl-error: #B3261E; /* errores y acciones destructivas · blanco encima 6,5:1 */ --tdl-error-suave: #FBE4E2; /* fondo de mensajes de error */ --tdl-sobre-oscuro-2: #DADCE6; /* texto secundario sobre noche · 11,6:1 */ --tdl-foco: var(--tdl-anil); /* anillo de foco visible */ /* Roles semánticos */ --tdl-fondo: var(--tdl-hueso); --tdl-superficie: var(--tdl-blanco); --tdl-texto: var(--tdl-noche); --tdl-texto-secundario: var(--tdl-pizarra); --tdl-accion: var(--tdl-anil); --tdl-accion-hover: var(--tdl-anil-oscuro); --tdl-sobre-accion: var(--tdl-blanco); --tdl-enlace: var(--tdl-coral-tierra); /* ---------- Tipografía (confirmada: Outfit títulos, Archivo textos) ---------- */ --tdl-fuente-titulos: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --tdl-fuente-texto: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* Escala (propuesta) · móvil primero; el tamaño de escritorio va entre paréntesis en la guía */ --tdl-t-portada: clamp(2.25rem, 1.6rem + 3vw, 3.5rem); /* 36 → 56 px · Outfit 700 */ --tdl-t-1: clamp(1.75rem, 1.45rem + 1.4vw, 2.25rem); /* 28 → 36 px · Outfit 700 */ --tdl-t-2: 1.5rem; /* 24 px · Outfit 700 */ --tdl-t-3: 1.1875rem; /* 19 px · Outfit 600 */ --tdl-t-cuerpo-g: 1.0625rem; /* 17 px · Archivo 400 · párrafos */ --tdl-t-cuerpo: 1rem; /* 16 px · Archivo 400 · mínimo en campos */ --tdl-t-chico: 0.875rem; /* 14 px · ayudas, etiquetas secundarias */ --tdl-t-mini: 0.8125rem; /* 13 px · firmas, notas; nunca texto esencial */ --tdl-interlineado-titulo: 1.1; --tdl-interlineado-texto: 1.5; --tdl-espaciado-titulo: -0.02em; --tdl-peso-titulo: 700; --tdl-peso-subtitulo: 600; --tdl-peso-texto: 400; --tdl-peso-fuerte: 600; /* ---------- Espaciado · base 4 (propuesto) ---------- */ --tdl-e-1: 4px; --tdl-e-2: 8px; --tdl-e-3: 12px; --tdl-e-4: 16px; --tdl-e-5: 20px; --tdl-e-6: 24px; --tdl-e-8: 32px; --tdl-e-10: 40px; --tdl-e-12: 48px; --tdl-e-16: 64px; --tdl-margen-movil: 20px; --tdl-ancho-contenido: 1160px; --tdl-ancho-lectura: 620px; /* ---------- Radios · nunca bordes rectos (confirmado) ---------- */ --tdl-r-min: 8px; /* mínimo permitido en cualquier elemento */ --tdl-r-control: 14px; /* campos, selectores, miniaturas */ --tdl-r-tarjeta: 18px; /* tarjetas y filas */ --tdl-r-panel: 24px; /* paneles y bloques destacados */ --tdl-r-hoja: 28px; /* hojas inferiores (bottom sheets) */ --tdl-r-pastilla: 999px;/* botones, chips, controles segmentados */ /* ---------- Tamaños ---------- */ --tdl-toque: 48px; /* área táctil mínima */ --tdl-boton: 52px; /* alto de botones principales */ --tdl-campo: 52px; /* alto de campos */ --tdl-borde-grosor: 2px; /* bordes de campos y botones secundarios */ /* ---------- Sombras (solo para elementos flotantes) ---------- */ --tdl-sombra-flotante: 0 10px 30px rgba(26, 34, 56, 0.22); --tdl-sombra-suave: 0 1px 3px rgba(26, 34, 56, 0.15); /* ---------- Movimiento ---------- */ --tdl-duracion: 160ms; --tdl-curva: cubic-bezier(0.2, 0.7, 0.2, 1); } @media (prefers-reduced-motion: reduce) { :root { --tdl-duracion: 0ms; } } /* ========================================================================== Puente con el código actual (public/assets/app.css) La app ya usa estas variables dentro de .tdl-app; al cargar este archivo después de app.css, toman los valores de marca sin tocar el resto. No afecta a las páginas públicas (.tdl-page), que conservan sus 4 paletas. ========================================================================== */ .tdl-app { --ink: var(--tdl-noche); --muted: var(--tdl-pizarra); --line: var(--tdl-borde); --paper: var(--tdl-blanco); --accent: var(--tdl-anil); background: var(--tdl-fondo); color: var(--tdl-texto); font-family: var(--tdl-fuente-texto); } .tdl-app h1, .tdl-app h2, .tdl-app h3, .tdl-hero h1, .tdl-side h2 { font-family: var(--tdl-fuente-titulos); letter-spacing: var(--tdl-espaciado-titulo); } /* Foco visible, igual en toda la app */ :where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--tdl-foco); outline-offset: 3px; }