/* ========================================================================== EN BALANCE — TOKENS DE DISEÑO · v1 · aprobado 25-sep-2026 -------------------------------------------------------------------------- Única fuente de verdad del sistema visual. Todo el CSS de la tienda consume estas variables; ningún archivo escribe un color, un tamaño, un radio o una sombra "a mano". Si algo pide un valor que no está aquí, la respuesta es el token más cercano — no un valor nuevo. Si de verdad hace falta uno nuevo, se añade AQUÍ primero y se documenta en BRANDBOOK.md. ========================================================================== */ :root { /* ---------------------------------------------------------------- COLOR */ /* Tinta y papel */ --eb-tinta: #161514; /* títulos, precio, texto principal */ --eb-papel: #f7f9f8; /* fondo de la página */ --eb-blanco: #ffffff; /* Acento — SOLO acción, estado activo o dato que importa. Nunca decora. #1f7480 da 5.4:1 sobre blanco (AA). El turquesa anterior daba 3.4–3.8. */ --eb-turquesa: #1f7480; --eb-turquesa-hover: #237d89; /* 4.8:1 con texto blanco: sigue en AA */ --eb-turquesa-suave: rgba(31, 116, 128, .10); /* fondo de algo activo */ --eb-turquesa-linea: rgba(31, 116, 128, .40); /* borde de algo activo */ /* Texto secundario: la tinta con opacidad, nunca un gris plano, para que herede el tono del fondo. Suelo: 60 % (por debajo falla el contraste). */ --eb-texto: color-mix(in oklab, var(--eb-tinta) 100%, transparent); --eb-texto-2: color-mix(in oklab, var(--eb-tinta) 74%, transparent); /* cuerpo */ --eb-texto-3: color-mix(in oklab, var(--eb-tinta) 62%, transparent); /* secundario */ --eb-filete: color-mix(in oklab, var(--eb-tinta) 12%, transparent); /* separador */ --eb-fondo-pieza: color-mix(in oklab, var(--eb-tinta) 5%, transparent); /* Semántico — separado del acento. Solo para lo que significa. */ --eb-ahorro: #2b6d51; /* descuento, envío gratis, "ya está" */ --eb-aviso: #9c5f18; /* quedan pocas piezas, algo requiere atención */ --eb-error: #a5342a; /* error en un formulario, pago rechazado */ /* Atmósfera — los halos del fondo. NUNCA texto, botón, borde ni icono. */ --eb-halo-agua: rgba(78, 203, 217, .50); --eb-halo-durazno: rgba(240, 168, 112, .42); --eb-halo-menta: rgba(159, 220, 175, .44); --eb-halo-cielo: rgba(168, 214, 236, .40); --eb-halo-lila: rgba(214, 196, 240, .38); /* ----------------------------------------------------------- TIPOGRAFÍA */ --eb-fuente: "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Tres pesos. Nada más. */ --eb-peso-texto: 400; --eb-peso-ui: 600; --eb-peso-titulo: 700; /* Nueve pasos (antes había 39). Fluidos: móvil → escritorio. */ --eb-t-display: clamp(2.25rem, 1.45rem + 3.4vw, 3.5rem); /* 36 → 56 */ --eb-t-seccion: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem); /* 28 → 40 */ --eb-t-subtit: clamp(1.375rem, 1.2rem + .75vw, 1.75rem); /* 22 → 28 */ --eb-t-pieza: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); /* 17 → 19 */ --eb-t-precio: clamp(1.625rem, 1.45rem + .75vw, 2rem); /* 26 → 32 */ --eb-t-lede: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); /* 17 → 19 */ --eb-t-cuerpo: 1rem; /* 16 */ --eb-t-chico: .875rem; /* 14 */ --eb-t-rotulo: .75rem; /* 12, MAYÚS */ /* Cuanto más grande el texto, más apretado. El cuerpo nunca se aprieta. */ --eb-tr-display: -.045em; --eb-tr-seccion: -.04em; --eb-tr-subtit: -.032em; --eb-tr-pieza: -.018em; --eb-tr-rotulo: .14em; --eb-lh-titulo: 1.08; --eb-lh-pieza: 1.25; --eb-lh-texto: 1.6; --eb-medida-lede: 52ch; --eb-medida-cuerpo: 62ch; /* ------------------------------------------------- ESPACIO · FIBONACCI */ /* No existe ningún otro valor. Si algo pide 16, es 13 o 21. */ --eb-e1: 5px; --eb-e2: 8px; --eb-e3: 13px; --eb-e4: 21px; --eb-e5: 34px; --eb-e6: 55px; --eb-e7: 89px; --eb-e8: 144px; --eb-ancho: 1200px; /* contenido */ --eb-margen: clamp(21px, 5vw, 89px); /* lateral de página */ --eb-aire-seccion: clamp(55px, 7vw, 89px); /* vertical de sección */ /* ------------------------------------------------------ RADIOS · FORMA */ /* También Fibonacci. Cinco valores (antes 22). */ --eb-r-foco: 8px; /* anillo de foco, miniaturas */ --eb-r-campo: 13px; /* campos, filas, fotos en lista */ --eb-r-pieza: 21px; /* tarjeta de producto, cristal ligero */ --eb-r-panel: 34px; /* panel, cristal estándar grande, portada */ --eb-r-pildora: 999px; /* botones, chips, insignias */ /* ------------------------------------------------- BORDES Y SOMBRAS */ /* El borde es sombra interior: no ocupa espacio ni mueve la maquetación. */ --eb-borde: inset 0 0 0 1px color-mix(in oklab, var(--eb-tinta) 10%, transparent); --eb-borde-activo: inset 0 0 0 1px var(--eb-turquesa-linea); --eb-filo: inset 0 1px 0 rgba(255, 255, 255, .9); /* luz arriba */ /* Difusas, muy desplazadas y con radio negativo: la pieza flota sin verse pegada. Tres niveles (antes 66). */ --eb-sombra-1: 0 13px 34px -21px rgba(22, 21, 20, .30); /* pieza pequeña */ --eb-sombra-2: 0 34px 70px -44px rgba(22, 21, 20, .45); /* tarjeta, cristal */ --eb-sombra-3: 0 55px 110px -55px rgba(22, 21, 20, .55); /* panel flotante */ /* ------------------------------------------------------------ CRISTAL */ /* Tres niveles (antes 17 desenfoques y 9 saturaciones). Una sola saturación: 180 %, la que ya tenía el sitio. Con el fondo al 55 % la diferencia entre 150 y 200 casi no se ve; lo que hace legible el cristal es el borde. */ --eb-cristal-ligero: rgba(255, 255, 255, .62); --eb-cristal: rgba(255, 255, 255, .55); --eb-cristal-profundo: rgba(255, 255, 255, .48); --eb-blur-ligero: blur(16px) saturate(180%); --eb-blur: blur(30px) saturate(180%); --eb-blur-profundo: blur(44px) saturate(180%); --eb-cristal-sin-blur: rgba(255, 255, 255, .88); /* respaldo */ /* ---------------------------------------------------------- MOVIMIENTO */ /* Dos curvas y un ease. No se inventan más. */ --eb-curva-entrada: cubic-bezier(.22, .7, .2, 1); /* lo que APARECE */ --eb-curva-layout: cubic-bezier(.32, .72, 0, 1); /* lo que CAMBIA */ --eb-d-hover: .16s; --eb-d-entrada: .42s; --eb-d-layout: .56s; --eb-desplaza: 12px; /* asentamiento, no vuelo */ /* -------------------------------------------------------- COMPONENTES */ --eb-alto-toque: 48px; /* mínimo de cualquier cosa que se toca con el dedo */ --eb-foco-color: color-mix(in oklab, var(--eb-turquesa) 40%, transparent); } /* ------------------------------------------------------------------------ Utilidades base del sistema. Las superficies se construyen con esto. ------------------------------------------------------------------------ */ .eb-cristal { background: var(--eb-cristal); -webkit-backdrop-filter: var(--eb-blur); backdrop-filter: var(--eb-blur); border-radius: var(--eb-r-pieza); box-shadow: var(--eb-borde), var(--eb-filo), var(--eb-sombra-2); } .eb-cristal--ligero { background: var(--eb-cristal-ligero); border-radius: var(--eb-r-pieza); -webkit-backdrop-filter: var(--eb-blur-ligero); backdrop-filter: var(--eb-blur-ligero); box-shadow: var(--eb-borde), var(--eb-filo), var(--eb-sombra-1); } .eb-cristal--profundo { background: var(--eb-cristal-profundo); border-radius: var(--eb-r-panel); -webkit-backdrop-filter: var(--eb-blur-profundo); backdrop-filter: var(--eb-blur-profundo); box-shadow: var(--eb-borde), var(--eb-filo), var(--eb-sombra-3); } /* Donde no hay desenfoque, o el usuario pidió menos transparencia. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .eb-cristal, .eb-cristal--ligero, .eb-cristal--profundo { background: var(--eb-cristal-sin-blur); } } @media (prefers-reduced-transparency: reduce) { .eb-cristal, .eb-cristal--ligero, .eb-cristal--profundo { background: var(--eb-cristal-sin-blur); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* El foco nunca se elimina. Se usa outline (y no box-shadow) porque sigue el radio propio de cada elemento — una píldora sigue siendo píldora — y no borra las sombras interiores del cristal. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { /* !important a propósito: el tema y los plugins traen 64 reglas que quitan el contorno de foco. Solo actúa con teclado (:focus-visible), nunca con ratón ni con el dedo. */ outline: 3px solid var(--eb-foco-color) !important; outline-offset: 2px !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }