/* ============================================================ La Ruta Mastercard · Design tokens (fuente única) Valores tomados del Figma (variables bg/*, text/*, outline/*). Todo color, radio, sombra y tipografía sale de aquí: los componentes y las pantallas NUNCA hardcodean valores. Lo cargan la web real y el laboratorio /mockups/ por igual. ============================================================ */ :root { /* ---------- superficies (bg/*) ---------- */ --bg-lowest: #131317; /* fondo de app, header, tab bar */ --bg-low: #16161c; /* fondo de pantalla */ --bg-medium: #1c1c24; /* tarjetas, botones-icono, inputs */ --bg-input: #1c1c24; --bg-super-high: #32323d; /* ---------- líneas ---------- */ --outline-low: #32323d; --line-connector: #9da3a7; /* conectores del recorrido */ --outline-sheet: #353535; /* borde de 1px de las hojas modales (sin variable en Figma) */ /* ---------- texto ---------- */ --text-paragraph: #f5f5f7; --text-placeholder: #9a9aa5; --text-muted: #707070; /* botones outline */ --text-accent: #ff5f00; /* naranja Mastercard */ --text-title: #f79e1b; /* amarillo Mastercard */ --text-disable: #55555f; /* Text/Disable: incentivo agotado, items "no incluye" */ /* ---------- marca y estados ---------- */ --accent-rgb: 255, 95, 0; --success: #1cc55b; /* WhatsApp / paso completado */ --success-tint: rgba(28, 197, 91, 0.08); /* fondo tintado verde: aviso "Cada ticket aprobado…" (landing) */ --title-tint: rgba(247, 158, 27, 0.15); /* fondo tintado amarillo: chip de ciudad e iconos de Ayuda (Mi perfil) */ --gradient-accent: linear-gradient(35.62deg, var(--text-accent) 0%, var(--text-title) 100%); /* banner de Inicio */ --gradient-accent-card: linear-gradient(30.74deg, var(--text-accent) 0%, var(--text-title) 100%); /* cabecera de cupo (370x30) */ --gradient-accent-detail: linear-gradient(29.43deg, var(--text-accent) 0%, var(--text-title) 100%); /* banner del detalle del incentivo (390x?) */ /* ---------- paleta neutra de Mis tickets y modales (Figma: Neutro oscuro/*, Neutros medios/*, Primary/*) ---------- OJO: NO equivale a bg-* / text-* de Inicio (#0b0b0c != #131317, #ffffff != #f5f5f7). No aproximar. */ --neutro-oscuro-900: #0b0b0c; /* fondo de hojas modales, cuerpo de tickets, texto sobre relleno claro */ --neutro-oscuro-800: #141517; /* cards, caja de filtros, pastilla de monto */ --neutro-oscuro-700: #1e2023; /* bordes de card, divisores, boton atras/cerrar */ --neutro-oscuro-500: #45484d; /* divisores de fila, "MXN" */ --neutros-medios-400: #6b7076; /* etiquetas y subtitulos */ --neutros-medios-300: #9ca1a7; /* etiquetas de chips comparativos */ --neutros-medios-white: #ffffff; /* titulos y valores */ --primary-500-mclaren: #ff8000; /* pestana activa, CTA, punto de "en revision" */ --primary-400: #ff9a33; /* icono y etiqueta EN REVISION */ /* ---------- estados (aprobado / en revision / rechazado) ---------- Estados/success (#12a150) NO es --success (#1cc55b, verde WhatsApp): son verdes distintos. */ --estados-success: #12a150; /* aprobado: texto, icono, badge, paso completado */ --estados-success-bg: rgba(18, 161, 80, 0.10); /* aprobado: fondo tintado */ --estados-warning: var(--primary-400); /* en revision: texto, icono */ --estados-warning-bg: rgba(255, 154, 51, 0.10); /* en revision: fondo tintado */ --estados-error: #ef4b4b; /* rechazado: texto, icono, borde, badge (sin variable en Figma) */ --estados-error-bg: rgba(239, 75, 75, 0.10); /* rechazado: fondo tintado / caja de motivo */ /* ---------- overlay y avisos ---------- */ --bg-overlay: rgba(19, 19, 23, 0.8); /* pop-up sobre pantalla atenuada (bg-lowest al 80%) */ --banner-low-stock: #e20518; /* banner rojo de cupo "ultimos" (sin variable en Figma) */ /* ---------- cabecera tipo Gmail del mockup del correo (solo correo-ganador) ---------- */ --gmail-bg: #ffffff; --gmail-text: #000000; --gmail-text-muted: #636363; --gmail-chip-external-bg: #f2bd42; --gmail-chip-inbox-bg: #dddddd; --gmail-chip-inbox-text: #555555; --gmail-avatar-outline: #e3e5f0; /* ---------- radios ---------- */ --radius-sm: 8px; --radius-md: 10px; --radius-lg: 20px; --radius-pill: 40px; --radius-xs: 6px; /* pestanas de filtro, chips */ --radius-icon-box: 6.554px; /* caja del icono de estado */ --radius-amount: 7px; /* pastilla de monto */ --radius-sheet: 17px; /* hoja modal */ --radius-circle: 50%; /* ---------- sombra "Cards Med" ---------- */ --shadow-card: 0 3px 6px 0 rgba(124, 192, 253, 0.10), 0 10px 10px 0 rgba(124, 192, 253, 0.09), 0 23px 14px 0 rgba(124, 192, 253, 0.05), 0 41px 16px 0 rgba(124, 192, 253, 0.01), 0 64px 18px 0 rgba(124, 192, 253, 0); --shadow-tab-bar: 10px -4px 2px 0 rgba(54, 161, 250, 0.10); /* tab bar de Premios (reemplaza el border-top) */ /* ---------- tipografía ---------- */ --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-email: Arial, Helvetica, sans-serif; /* cuerpo del correo (los clientes de correo no cargan Outfit) */ --fw-extralight: 200; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* tamanos de la escala del Figma (px) */ --fs-10: 10px; --fs-11: 11px; --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-32: 32px; /* tamanos GRANDES fluidos: iguales al Figma desde 400px de ancho y mas, y bajan linealmente hasta 360px (a 430px valen exactamente 32 / 24 / 24.713 px, asi que las comparaciones contra el Figma no cambian). */ --fs-display: clamp(26px, calc(26px + (100vw - 360px) * 0.15), 32px); /* H1, titulo del pop-up */ --fs-title: clamp(20px, calc(20px + (100vw - 360px) * 0.10), 24px); /* banner, nombre de parada, titulos de bloque */ --fs-numeral: clamp(20px, calc(20px + (100vw - 360px) * 0.118), 24.713px); /* numeros del stepper */ /* interletrado (em, para que escale con el tamano) */ --tracking-eyebrow: 0.15em; /* 1.8px a 12px: etiquetas en mayusculas ("HISTORIAL", "FECHA") */ --tracking-tight: -0.02em; /* -0.32px a 16px, -0.28px a 14px, -0.48px a 24px */ --tracking-tighter:-0.04em; /* titulos bold de tarjetas/pop-up */ --tracking-wide: 0.02em; /* 0.32px a 16px */ /* ---------- layout ---------- */ --app-max-width: 430px; --sheet-max-width: 409.126px; /* hoja modal (409.126 en el Figma; 404.369 en moneda, que la deja fluir) */ }