/* ============================================================================ * TOKENS DE DISEÑO — CambiaTuBatería Perú * * Única fuente de color, tipografía y espaciado. Ningún componente introduce * valores sueltos (verificado por tests/unit/tokens.test.js). * * PROBLEMA DE DISEÑO QUE RESUELVE ESTE SISTEMA * El negocio tiene dos caras opuestas: urgencia (conductor varado, necesita * el botón YA) y especialización premium (BMW, Audi, Mercedes, reprogramación * BMS). Resueltas mal, se anulan: el rojo de urgencia repartido por la página * se ve barato, y el minimalismo elegante esconde la acción que salva la venta. * * La solución es jerárquica, no decorativa: * · El lienzo es sobrio y oscuro — ahí vive la sofisticación. * · El ámbar es la energía de marca: acentos, datos, detalles técnicos. * · El rojo aparece UNA sola vez por pantalla, en el auxilio. Su escasez * es lo que lo hace gritar. * ========================================================================= */ :root { /* --- Marca --------------------------------------------------------------- * Azul institucional del logo, profundizado. El original (#0D233A) se * mantiene como ancla; se añaden extremos para superficies y texto. * --------------------------------------------------------------------- */ --brand-950: #060D18; --brand-900: #0B1729; --brand-800: #0D233A; /* el azul del logo */ --brand-700: #14385C; --brand-600: #1D5183; --brand-500: #2C6DA8; --brand-200: #A9CBE8; --brand-100: #DCEBF7; /* --- Energía (ámbar) ----------------------------------------------------- * El acento de marca. Una batería es corriente, chispa, arranque: el ámbar * dice eso sin decirlo. Además diferencia: la competencia peruana del rubro * es toda azul y roja, ninguna usa un acento cálido. * --------------------------------------------------------------------- */ --energy-600: #B45309; --energy-500: #E08700; --energy-400: #F5A524; --energy-300: #FBBF4C; --energy-100: #FEF0D2; /* --- Urgencia ------------------------------------------------------------ * RESERVADO para la acción de auxilio. Un solo elemento por pantalla. * Repartirlo lo degrada de señal a decoración. * --------------------------------------------------------------------- */ --urgent-700: #991B1B; --urgent-600: #C1272D; --urgent-500: #DC2F35; --success-600: #15803D; --success-100: #DCFCE7; --warning-500: #C2660C; /* --- Neutros ------------------------------------------------------------- * Con matiz azulado, no grises puros: armonizan con la marca y evitan el * aspecto de plantilla genérica. El papel es hueso, no blanco puro — el * blanco #FFF sobre pantalla brillante cansa y abarata. * --------------------------------------------------------------------- */ --ink-900: #0B1220; --ink-800: #1C2536; --ink-600: #47536B; --ink-500: #64748B; --ink-400: #94A3B8; --ink-300: #CBD5E1; --paper: #FFFFFF; --paper-2: #F8FAFC; --paper-3: #F1F5F9; --line: #E2E8F0; --line-strong: #CBD5E1; /* --- Tipografía ---------------------------------------------------------- * Manrope: geométrica y limpia, con contrapunto humanista. Se sostiene en * titular grande sin volverse fría, y tiene cobertura completa de acentos * del español. Una sola familia variable en vez de dos: menos peso y * jerarquía por grosor, no por contraste de fuentes. * * Escala de tercera mayor (1.25) — suficiente contraste entre niveles para * que la jerarquía se lea de un vistazo, sin saltos bruscos. * --------------------------------------------------------------------- */ --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "SFMono-Regular", ui-monospace, "Cascadia Mono", Menlo, monospace; --text-xs: 0.75rem; /* 12px — etiquetas, notas legales */ --text-sm: 0.875rem; /* 14px — apoyo, metadatos */ --text-base: 1rem; /* 16px — cuerpo. Nunca menos en móvil */ --text-lg: 1.125rem; /* 18px — entradilla */ --text-xl: 1.375rem; /* 22px — subtítulos */ --text-2xl: 1.75rem; /* 28px — títulos de sección */ --text-3xl: 2.25rem; /* 36px — titular móvil */ --text-4xl: 3rem; /* 48px — titular escritorio */ --text-5xl: 3.75rem; /* 60px — cifras destacadas */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-body: 1.6; /* Titulares grandes necesitan tracking negativo: a tamaño display, el espaciado por defecto se ve suelto y amateur. */ --tracking-tight: -0.03em; --tracking-snug: -0.015em; --tracking-wide: 0.08em; /* para versalitas y etiquetas */ /* --- Espaciado — múltiplos de 4px ---------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 26px; --radius-full: 999px; /* --- Elevación ----------------------------------------------------------- * Sombras en dos capas (contacto + difusión), como la luz real. Una sola * sombra difusa es la marca visual del template barato. * --------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgb(11 18 32 / 0.06), 0 1px 3px rgb(11 18 32 / 0.10); --shadow-md: 0 2px 4px rgb(11 18 32 / 0.06), 0 8px 16px rgb(11 18 32 / 0.08); --shadow-lg: 0 4px 8px rgb(11 18 32 / 0.06), 0 16px 32px rgb(11 18 32 / 0.12); --shadow-xl: 0 8px 16px rgb(11 18 32 / 0.08), 0 32px 64px rgb(11 18 32 / 0.16); /* La sombra del botón de auxilio lleva el tinte del propio rojo: el halo neutro corta el objeto del fondo, el tintado lo integra. */ --shadow-urgent: 0 4px 12px rgb(193 39 45 / 0.28), 0 12px 32px rgb(193 39 45 / 0.22); --shadow-energy: 0 4px 12px rgb(245 165 36 / 0.25); /* --- Objetivo táctil ----------------------------------------------------- * 44px es el mínimo de las guías de Apple. La acción principal usa 56px: * un conductor con prisa, de pie junto al auto y a veces con lluvia, falla * objetivos del tamaño mínimo. * --------------------------------------------------------------------- */ --touch-min: 44px; --touch-primary: 56px; --container: 1180px; --container-narrow: 720px; --z-sticky: 30; --z-overlay: 40; --z-sheet: 50; --z-toast: 60; }