/* Hoteles.mx — Design tokens (drop-in)
* Pega este archivo en assets/css/tokens.css y enlázalo al principio
* de tu cadena de stylesheets en el :
*
*
* (el styles.css renombrado)
* (tu CSS legacy)
*
* Estos tokens son la fuente de verdad para colores, tipografía y espaciado.
*/
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
/* ——— BRAND ——— */
--red: #DC0807; /* Primario · CTAs, kickers, acentos */
--red-deep: #B30606; /* Hover de rojo */
--red-soft: #FDECEC; /* Fondo suave rojo (chips, badges) */
/* ——— PAPER (warm light) ——— */
--paper: #F6F1E8; /* Fondo de bloques destacados */
--paper-2: #FBF7EE; /* Fondo base de la página */
--paper-3: #EFE7D5; /* Chips, placeholders, hover sutil */
/* ——— INK (warm dark) ——— */
--ink: #181410; /* Texto principal + fondos oscuros */
--ink-2: #3D362F; /* Texto secundario / párrafos */
--mute: #8B847B; /* Texto muted, labels */
/* ——— DIVIDERS ——— */
--line: #E4DBC9; /* Bordes, divisores sutiles */
--line-2: #D6CAB1; /* Bordes con más contraste */
/* ——— ACCENT ——— */
--green: #1F4D3F; /* Verde botánico — comisión $0, badges éxito */
/* ——— WHATSAPP ——— */
--whatsapp: #25D366;
--whatsapp-deep: #128C7E;
/* ——— RADII ——— */
--radius-sm: 8px;
--radius: 14px;
--radius-lg: 24px;
/* ——— SHADOWS ——— */
--shadow-soft: 0 18px 40px -16px rgba(24, 20, 16, 0.25);
--shadow-card: 0 14px 40px -16px rgba(24, 20, 16, 0.18);
--shadow-overlay: 0 12px 32px -8px rgba(0, 0, 0, 0.4);
/* ——— SPACING SCALE ——— */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 88px;
/* ——— LAYOUT ——— */
--shell-max: 1280px;
--shell-wide-max: 1440px;
--shell-pad: 32px;
/* ——— TYPOGRAPHY ——— */
--font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;
/* Type scale */
--fs-eyebrow: 12px;
--fs-body-sm: 13px;
--fs-body: 14px;
--fs-body-md: 15px;
--fs-body-lg: 17px;
--fs-h4: 18px;
--fs-h3: 24px;
--fs-h2: 36px;
--fs-h2-lg: 40px;
--fs-display: 64px;
--fs-display-lg: 76px;
--fs-display-xl: 100px;
/* Letter spacing */
--tracking-tight: -0.01em;
--tracking-tighter: -0.02em;
--tracking-display: -0.04em;
--tracking-wide: 0.18em;
/* Line heights */
--lh-display: 0.96;
--lh-body: 1.5;
--lh-reading: 1.65;
}
/* Base reset utilities — copia solo si tu CSS legacy no las tiene ya */
*, *::before, *::after { box-sizing: border-box; }
body {
font-family: var(--font-sans);
background: var(--paper-2);
color: var(--ink);
font-size: var(--fs-body-md);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}