/* Utilidades puntuales que no vienen en el bundle de Tailwind que trae Unfold (viene recortado a las clases que Unfold mismo usa, no es un build propio del proyecto) — para avisos que no calzan en la paleta base/primary. */ .alert-warning { background-color: rgba(139, 67, 64, 0.07); border-color: rgba(139, 67, 64, 0.25); } .text-alert-warning { color: #8b4340; } /* El navy (#0F3654, ver unfold_config.py) es el color principal y ya vive en `primary`. El teal queda reservado como acento puntual para un par de botones CTA específicos (no es un token global). `!important` porque este archivo se carga antes que el bundle de Tailwind de Unfold en el (ver unfold/templates/unfold/layouts/skeleton.html), así que sin esto el `.bg-primary-600` del componente de botón gana el empate de especificidad. */ .btn-cta-teal { background-color: #0d9488 !important; border-color: #0d9488 !important; } .btn-cta-teal:hover { background-color: #0b7a72 !important; } /* Sube ~4px cada escalón del tipo (text-xs...text-6xl) para que todo se lea más grande — pedido explícito, pensando en coordinadoras que no son muy tech-savvy (esto ya va en la tercera subida). Solo se tocan los tamaños de fuente, no `--spacing`, así que el espaciado/padding no cambia, nada más el texto se ve más grande. Los line-height (--text-*--line-height) son ratios unitless relativos al tamaño de fuente, así que escalan solos sin tocarlos. No hace falta `!important` ni preocuparse por el orden de carga: Tailwind define estas variables dentro de `@layer theme`, y una regla fuera de cualquier `@layer` (como esta) siempre gana sobre una dentro de un layer, sin importar el orden en el documento. */ :root { --text-xs: 0.9875rem; --text-sm: 1.125rem; --text-base: 1.25rem; --text-lg: 1.375rem; --text-xl: 1.5rem; --text-2xl: 1.75rem; --text-3xl: 2.125rem; --text-4xl: 2.5rem; --text-5xl: 3.25rem; --text-6xl: 4rem; }