/* ========================================================================== Brasender Brand Tokens -------------------------------------------------------------------------- Sistema de design centralizado. Todo color, radio, sombra y peso de marca se define acá. Cualquier otro CSS del proyecto debe consumir estas variables — nunca hardcodear hex en componentes. Cargar SIEMPRE antes de base.css y de cualquier CSS de componente. ========================================================================== */ :root { /* ---------- Marca: Navy ---------- */ --brand-navy: #0A2658; /* Header, footer, círculos de servicio */ --brand-navy-dark: #061A40; /* Hover/active del navy */ --brand-navy-soft: #1B3A75; /* Tinta secundaria sobre fondos claros */ /* ---------- Marca: Rojo (acción / urgencia) ---------- */ --brand-red: #E03616; /* CTA principal, banner, badges, dots activos */ --brand-red-dark: #B32B12; /* Hover del rojo */ --brand-red-soft: #FDEEE9; /* Fondo sutil para alertas/pills suaves */ /* ---------- Marca: Amarillo (highlight) ---------- */ --brand-yellow: #FFD60A; /* Texto destacado del banner, botón "VER OFERTAS" */ --brand-yellow-dark: #E6BE00; /* Hover del amarillo */ /* ---------- Superficies ---------- */ --surface-page: #F4F6FB; /* Fondo general (gris azulado muy claro) */ --surface-card: #FFFFFF; /* Cards, modales, contenedores */ --surface-muted: #E2E8F0; /* Separadores, dots inactivos */ /* ---------- Texto ---------- */ --text-strong: #0F172A; /* Headings (negro azulado, no negro puro) */ --text-body: #1E293B; /* Cuerpo de texto */ --text-muted: #64748B; /* Subtítulos, hints, placeholders */ --text-on-dark: #FFFFFF; /* Texto sobre fondos navy/rojo */ /* ---------- Radios ---------- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; --radius-circle: 50%; /* ---------- Sombras ---------- */ --shadow-card: 0 8px 24px rgba(10, 38, 88, .08); --shadow-card-hover: 0 12px 32px rgba(10, 38, 88, .14); --shadow-cta-red: 0 4px 14px rgba(227, 6, 19, .35); --shadow-icon-navy: 0 6px 16px rgba(10, 38, 88, .25); /* ---------- Tipografía ---------- */ --font-family-base: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-black: 800; /* ---------- Layout ---------- */ --container-max: 1200px; --header-height-mobile: 60px; --bottom-nav-height: 70px; /* Espacio inferior estándar del contenido en móvil: alto del bottom-nav fijo + área segura del notch (iPhone) + un respiro visible. Se aplica al para que ninguna página quede tapada ni pegada a la barra inferior. */ --app-bottom-safe: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 32px); /* ---------- Transiciones ---------- */ --transition-fast: all .15s ease; --transition-base: all .25s ease; --transition-pop: all .3s cubic-bezier(.34, 1.56, .64, 1); }