/* Almud Bar v2 · tokens (fase 8). Solo propiedades personalizadas (las fuentes van en fonts.css). Fuente de verdad: _plan/direccion/sistema.md. Contrastes: _plan/direccion/contraste.py */ :root { color-scheme: dark; /* ---- Color: suelo, tinta, acento ---- */ --noche: #170e0b; /* suelo de la página: la sombra cálida de sus fotos (ΔE 5,7 con el pie de P189) */ --noche-alta: #2a1a14; /* escalón de superficie: hoja del menú, bloques sobre noche */ --papel: #f6ecdc; /* tinta sobre noche (16,3:1) y suelo de la carta */ --papel-suave: #cbb9a5; /* texto secundario sobre noche (10,0:1) */ --barra: #ff3f6c; /* EL acento: solo acción primaria, foco y selección */ --barra-tinta: var(--noche); /* tinta sobre --barra (5,6:1) */ /* ---- Campos de capítulo (afiche Ojo Piojo). Uno por pantalla, con su tinta ---- */ --coral: #f26343; --coral-tinta: var(--noche); /* 6,0:1 */ --turquesa: #40b9c2; --turquesa-tinta: var(--noche); /* 8,1:1 */ --fucsia: #cd0b61; --fucsia-tinta: var(--papel); /* 4,7:1 */ --amarillo: #fac307; --amarillo-tinta: var(--noche); /* 11,7:1 */ --verde: #06aa6b; --verde-tinta: var(--noche); /* 6,3:1 */ /* Asignación por capítulo (la del día la decide la cosa viva) */ --campo-lugar: var(--noche); --campo-lugar-tinta: var(--papel); --campo-tragos: var(--amarillo); --campo-tragos-tinta: var(--amarillo-tinta); --campo-comida: var(--verde); --campo-comida-tinta: var(--verde-tinta); --campo-quien: var(--fucsia); --campo-quien-tinta: var(--fucsia-tinta); --campo-eventos: var(--coral); --campo-eventos-tinta: var(--coral-tinta); /* Día de la promo: Mar coral · Mié turquesa · Jue fucsia · Vie amarillo · Sáb verde */ --dia-2: var(--coral); --dia-3: var(--turquesa); --dia-4: var(--fucsia); --dia-5: var(--amarillo); --dia-6: var(--verde); /* ---- Lo impreso: la carta (solo sobre --papel) ---- */ --carta-suelo: var(--papel); --carta-azul: #2023e4; /* nombres (7,4:1). --allow palette-purple: es el azul impreso de su carta */ --carta-magenta: #cd007a; /* precios en pantalla (4,6:1); el impreso #ec008c da 3,6:1 y no se usa en texto */ --carta-tinta: var(--noche); /* descripciones (16,3:1) */ /* ---- La carta en su página: un tinte suave por pestaña (lo pidió el cliente). Fase 16: ya no son hex a mano; cada tinte se DERIVA de su campo mezclado con --carta-hoja (la hoja clara), 12 % de campo (8 % el fucsia, que oscurece más). Contraste calculado (contraste.py / sistema.md §2.5): todos ≥ 4,56:1 con magenta, ≥ 6,79:1 con azul carta y ≥ 14,9:1 con noche. */ --carta-hoja: #fffaf3; /* la hoja clara: base de los tintes (magenta 5,22 · azul 8,35) */ --tinte-fucsia: color-mix(in srgb, var(--fucsia) 8%, var(--carta-hoja)); /* #fbe7e7 · magenta 4,56 */ --tinte-turquesa: color-mix(in srgb, var(--turquesa) 12%, var(--carta-hoja)); /* #e8f2ed · magenta 4,73 */ --tinte-amarillo: color-mix(in srgb, var(--amarillo) 12%, var(--carta-hoja)); /* #fef3d7 · magenta 4,90 */ --tinte-coral: color-mix(in srgb, var(--coral) 12%, var(--carta-hoja)); /* #fde8de · magenta 4,58 */ --tinte-verde: color-mix(in srgb, var(--verde) 12%, var(--carta-hoja)); /* #e1f0e3 · magenta 4,58 */ --tinte-papel: var(--papel); /* comilona: el papel (magenta 4,63) */ /* ---- Scrim funcional (único degradado del sistema, solo bajo texto sobre foto) ---- */ --scrim: 12 7 5; /* rgb neutro-cálido para rgb(var(--scrim) / a) */ /* ---- Tipografía: dos familias ---- Pulido 3: los pasos de lectura (small, body, lead, botón) van en rem: siguen el tamaño de letra que el visitante eligió en su navegador (16 px por defecto = mismos valores de antes). Titulares y display quedan en px: ya son de afiche. */ --font-display: "Six Caps", "Oswald", "Arial Narrow", sans-serif; --font-text: "Oswald", "Arial Narrow", sans-serif; --w-light: 300; --w-regular: 400; --w-semi: 600; /* Escala de 5 pasos (k medido Six Caps = 0,22; Oswald 600 = 0,40) */ --t-small: 0.875rem; --lh-small: 1.4; --t-body: clamp(1.0625rem, 1rem + 0.14vw, 1.125rem); --lh-body: 1.55; --t-lead: clamp(1.375rem, 1.125rem + 0.6vw, 1.75rem); --lh-lead: 1.25; --t-head: clamp(56px, 40px + 4vw, 104px); --lh-head: 0.9; --t-display: clamp(96px, 52px + 11vw, 216px); --lh-display: 0.86; --track-display: 0.01em; /* Six Caps es todo mayúsculas: 0…+0,03em */ --track-body-dark: 0.01em; /* claro sobre oscuro */ --measure: 34em; /* ≈ 66 caracteres de Oswald 300 a 18px */ /* ---- Grilla y espacio ---- */ --margin: clamp(16px, 2.2vw, 32px); --gutter: clamp(12px, 1.6vw, 24px); --cols: 4; /* 4 teléfono · 8 desde 700px · 12 desde 1024px (ver sistema.md) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --section: clamp(72px, 4px + 11vw, 200px); /* 72 en teléfono · 162 en 1440 · 200 tope */ --photo-max: 1440px; /* ninguna foto de 1440 px se estira: ancho máximo de la portada */ --ratio-retrato: 4 / 5; --ratio-banda: 16 / 9; --radius: 0; /* esquinas rectas en todo: fotos, botones, campos */ --nav-h: 64px; /* ---- Componentes ---- */ --btn-h: 48px; --btn-px: 22px; --btn-font: var(--w-semi) 1.0625rem/1 var(--font-text); --focus-w: 3px; --focus-offset: 3px; --underline-offset: 0.18em; --underline-w: 0.08em; /* ---- Movimiento (Emil §6; prohibido escribir curvas o duraciones sueltas) ---- */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --ease-hover: ease; --d-press: 140ms; --d-hover: 200ms; --d-ui: 240ms; --d-panel: 400ms; --d-panel-out: 250ms; --d-reveal: 700ms; --d-hero: 800ms; --stagger: 40ms; --stagger-card: 60ms; --d-fade-reduced: 180ms; --d-tab: 200ms; /* cambio de pestaña de la carta (Emil §6.14: opacity + 8 px; 0 ms por teclado) */ --d-photo: 600ms; /* revelado de foto con clip-path (Emil §6.9) */ --delay-hoy-h: 240ms; --delay-hoy-foto: 360ms; /* "la franja se imprime": titular y foto detrás del campo (contrato) */ } @media (min-width: 700px) { :root { --cols: 8; } } @media (min-width: 1024px) { :root { --cols: 12; --nav-h: 72px; } }