/* ========================================================= TOKENS — Gala de Subastas ------------------------------------------------------------ Dirección: noche de gala, no sala de juego. La paleta es de imprenta: negro mate, crema muy oscuro, blanco cálido, gris cálido. El dorado es el protagonista y está limitado a propósito — si todo es dorado, nada es dorado. El verdePitch queda como secundario (tu equipo, lo que está vivo) y el rojo solo aparece cuando hay que apurarse. EL COLOR NO DECORA, INFORMA: dorado = premio, el precio, el líder, la acción verde = tu equipo, lo que está vivo rojo = urgencia: últimos segundos, error, eliminación azul = dato, información Cero neones, cero violetas, cero brillo de videogame. TODO valor visual sale de acá. ========================================================= */ :root{ /* ======================================================= 1. SUPERFICIES — negras pero CALENTAS Negro azulado se ve como panel de consola. Negro con un punto de crema se ve como papel y como noche. ======================================================= */ --bg: #0c0b09; /* el salon, a oscuras */ --surface: #151310; /* crema muy oscuro: campos, zonas hundidas */ --card: #1c1a15; /* ficha */ --card-2: #26231c; /* elemento dentro de la ficha, hover */ /* ======================================================= 2. BORDES ======================================================= */ --line: #2e2a22; --line-2: #423d31; /* ======================================================= 3. TEXTO --text blanco cálido, no blanco: el blanco puro sobre crema vibra y da aspecto de hospital. --muted gris cálido. Pasa AA en las cuatro superficies (5.9:1 en la más clara). --faint decoración: líneas, bordes, trazos, disabled. 2.6:1 — nunca texto. ======================================================= */ --text: #f2ede0; /* 13.4:1 en la superficie más clara */ --muted: #a89e8a; /* 5.9:1 */ --faint: #6b6355; /* 2.6:1 — decorativo, no texto */ --muted-2: var(--faint); /* ======================================================= 4. SIGNIFICADO ======================================================= */ --gold: #d4af6a; /* primario: precio, acción, premio. 7.6:1 */ --gold-live: #e0bc72; /* solo el número héroe. 8.7:1 */ --gold-deep: #8a6d2f; /* relleno de oro al 12% */ --gold-bg: rgba(212,175,106,.13); --grass: #4fbf7f; /* tu equipo, lo vivo. 6.8:1 */ --grass-deep: #245c3c; --grass-bg: rgba(79,191,127,.13); --red: #c04a4e; /* rellenos, bordes */ --red-tint: #e08487; /* el mismo rojo legible como texto. 5.8:1 */ --red-bg: rgba(192,74,78,.14); --blue: #7fa3cc; /* dato. 6.0:1. La "iluminación azul" */ --blue-deep: #2f4a66; --blue-bg: rgba(127,163,204,.13); /* ======================================================= 5. POSICIONES Los colores se mueven con la paleta de la gala. El oro es el arquero porque es el primero de la subasta y el más caro de completar. ======================================================= */ --pos-por: var(--gold); --pos-def: var(--blue); --pos-med: var(--grass); --pos-del: var(--red-tint); --pos-por-bg: var(--gold-bg); --pos-def-bg: var(--blue-bg); --pos-med-bg: var(--grass-bg); --pos-del-bg: var(--red-bg); /* ======================================================= 6. TIPOGRAFÍA — TRES VOCES Esta es la identidad. La app habla en tres registros y nunca los mezcla por descuido: SERIF (Bodoni Moda) rótulos y títulos de evento. Es la gala, el catálogo de subasta, la prensa. Sólo en tamaño grande: en cuerpo chico un Didone se deshace y deja de leerse sobre negro. CONDENSADA (Barlow) TODO número: precios, tabla, marcador, reloj, contador. Es la transmisión deportiva. SANS (Inter) texto y controles. Es la app. La mezcla de un Didone con una grotesca condensada es lo que hace que esto no parezca un juego de fútbol ni un panel de administración: es prensa que retransmite. ======================================================= */ --font-display: 'Bodoni Moda', 'Playfair Display', Georgia, 'Times New Roman', serif; --font-num: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif; --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* El serif no se usa debajo de este tamaño. Verificado: a 20px el Didone pierde el pelo y sobre crema queda ilegible. */ --serif-min: 40px; --type-3xs: 10px; /* etiquetas en versal, th de tabla */ --type-2xs: 11px; /* letra chica */ --type-xs: 12.5px; /* pill, nota al pie */ --type-sm: 13.5px; /* texto de apoyo */ --type-md: 15px; /* cuerpo: tamaño base */ --type-lg: 17px; /* lead, texto destacado */ --type-xl: 19px; /* título de tarjeta */ --type-2xl: 22px; /* subtítulo de sección */ --type-3xl: 26px; /* valor dentro de una ficha */ --type-value: clamp(28px, 3.6vw, 40px); /* número que se mira ahora */ /* Displays fluidos. --serif son títulos de gala; --num son números de camiseta. */ --type-d1: clamp(22px, 3vw, 34px); --type-d2: clamp(28px, 4vw, 48px); --type-d3: clamp(38px, 6.5vw, 90px); --type-d4: clamp(58px, 11vw, 150px); --type-hero: clamp(80px, 19vw, 214px); --serif: 'Bodoni Moda', Georgia, serif; --leading-serif: 1.0; /* el Didone necesita aire arriba */ --leading-tight: .88; --leading-snug: 1.12; --leading-body: 1.55; --tracking-wide: .2em; /* versal de prensa: muy espaciada */ --tracking-mid: .12em; /* ======================================================= 7. ESPACIADO — base 4/8 ======================================================= */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px; --s10: 64px; --s11: 80px; --gutter: clamp(18px, 4.5vw, 32px); --gap: var(--s4); --pad: var(--s5); /* ======================================================= 8. RADIOS La gala es recta. Poco redondeo: las fichas de un catálogo impreso no son cápsulas. ======================================================= */ --r-sm: 2px; /* badge */ --r-md: 4px; /* botón, tarjeta, input */ --r-pill: 999px; --radius: var(--r-md); /* ======================================================= 9. ELEVACIÓN Sombras profundas y cálidas. En un fondo casi negro la sombra sola no separa nada: hace falta que la sombra sea más cálida que el fondo, no más oscura. ======================================================= */ --shadow-1: 0 2px 6px rgba(0,0,0,.6); --shadow-2: 0 8px 24px rgba(0,0,0,.7); --shadow-3: 0 24px 60px rgba(0,0,0,.78); --shadow-deep: 0 30px 80px rgba(0,0,0,.85); /* Filo de luz arriba: la ficha parece iluminada desde el escenario, no pegada sobre la mesa. */ --edge-light: inset 0 1px 0 rgba(242,237,224,.05); /* La iluminación azul: un resto frío arriba a la derecha que separa el negro del negro. */ --rim-light: inset 0 1px 0 rgba(127,163,204,.07); /* ======================================================= 10. CAPAS ======================================================= */ --z-bg: 0; --z-content: 1; --z-raise: 10; --z-sticky: 40; --z-toast: 100; --z-modal: 200; /* ======================================================= 11. MOVIMIENTO La gala se mueve despacio y sin apuro. Más lento que una app de juego, y con una curva que entra y frena. ======================================================= */ --t-fast: 140ms; --t-base: 240ms; --t-slow: 480ms; --t-cinema: 1000ms; --ease: cubic-bezier(.2,.8,.2,1); --ease-in-out: cubic-bezier(.4,0,.2,1); --ease-snap: cubic-bezier(.34,1.4,.64,1); --ease-draw: cubic-bezier(.16,1,.3,1); /* la martilla del martillo */ --speed: var(--t-base); /* ======================================================= 12. OBJETIVO TÁCTIL ======================================================= */ --tap: 44px; /* El anillo de foco. Dorado como el acento principal, con un halo oscuro por debajo para que se vea sobre cualquier fondo —incluido el dorado— y no solo sobre el negro. La idea del halo es que el indicador tenga contraste contra lo que tenga debajo: un borde dorado sobre un botón dorado es invisible, y el foco es lo único que le dice a alguien dónde está. */ --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold); /* ======================================================= 13. SAFE AREA ======================================================= */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); }