/* ===========================================================================
   VARIABLES
   Todo lo que se puede cambiar del diseno esta aqui: colores, tipografias,
   tamanos, espacios y radios. Ningun otro archivo escribe un color o una
   medida a mano; siempre usan var(--...).

   Los valores salen de diseno/project/Portafolio.dc.html.

   Sobre las medidas: son numeros enteros y, siempre que se ha podido, pares.
   Los tamanos de letra impares (11, 13, 15, 17, 19) se respetan tal cual
   porque son los del diseno y redondearlos rompia la jerarquia: 13 y 14 px
   distinguen el texto secundario del principal, y al igualarlos se pierde esa
   diferencia. Los que venian con decimales (12.5, 13.5, 14.5) si se han
   redondeado a entero.

   PUNTOS DE RUPTURA (van escritos a mano en cada @media porque las variables
   CSS no funcionan dentro de la condicion de una media query):

       1280px   se pliega la columna de colecciones a filtros horizontales
       1024px   la lista se estrecha
        768px   una sola columna: el rail pasa abajo y la lista y el caso
                se convierten en dos pantallas distintas
   =========================================================================== */

:root {

    /* --- Colores -------------------------------------------------------- */
    --tinta: #17171a;
    /* Rojo de marca. El del diseno (#d93a1c) daba 4,40:1 sobre la superficie
       clara y se quedaba por debajo del minimo de 4,5:1; este da 4,92:1 y es
       practicamente indistinguible. */
    --acento: #cc3519;

    --superficie: #fbfaf8;
    --superficie-suave: #f3f1ec;
    --superficie-imagen: #edebe5;

    --texto-fuerte: #3c3c42;
    --texto: #5c5c64;
    --texto-medio: #6c6c74;
    /* El gris del diseno (#8a8a92) daba 3,28:1: por debajo del minimo legible
       para texto pequeno, y lo usa casi todo el texto secundario. Este da
       5,22:1 sobre la superficie y 4,53:1 sobre la fila seleccionada, que
       lleva un 7% de tinta encima y es donde peor se leia. */
    --texto-suave: #696971;
    --texto-tenue: #a9a9b0;

    /* Lineas y fondos de estado, todos sobre la misma tinta */
    --borde-suave: rgba(23, 23, 26, 0.08);
    --borde: rgba(23, 23, 26, 0.10);
    --borde-fuerte: rgba(23, 23, 26, 0.16);
    --fondo-campo: rgba(23, 23, 26, 0.05);
    --fondo-hover: rgba(23, 23, 26, 0.06);
    --fondo-activo: rgba(23, 23, 26, 0.07);

    /* --- Tipografias ---------------------------------------------------- */
    --fuente-titulos: "Schibsted Grotesk", "DM Sans", system-ui, sans-serif;
    /* Para leer. La del portafolio anterior (mundial) es de Adobe Fonts y
       ataba el sitio a un kit con dominios autorizados; DM Sans esta en Google
       y es de la misma familia de formas: geometrica, redonda y de altura de x
       generosa. */
    --fuente-base: "DM Sans", system-ui, sans-serif;
    /* Monoespaciada para los datos de sistema: rotulos en mayusculas, cifras,
       numeros de figura y atajos de teclado.

       Empezo siendo DM Mono, pero es un diseno ligero: en mayusculas y a 10px
       se quedaba en un gris fino que costaba leer, y su peso mas alto es 500.
       IBM Plex Mono llega a 600 y tiene la mayuscula mas plantada, que es lo
       que necesitan estos rotulos. */
    --fuente-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --peso-normal: 400;
    --peso-medio: 500;
    --peso-semi: 600;
    --peso-fuerte: 700;

    /* Los botones van aparte: sobre un rectangulo negro, el peso medio del
       texto normal se queda fino y la etiqueta pierde cuerpo. */
    --peso-boton: 600;

    --texto-10: 10px;
    --texto-11: 11px;
    --texto-12: 12px;
    --texto-13: 13px;
    --texto-14: 14px;
    --texto-15: 15px;
    --texto-16: 16px;
    --texto-17: 17px;
    --texto-18: 18px;
    --texto-19: 19px;
    --texto-26: 26px;
    --texto-32: 32px;

    /* Titulares: se encogen en pantallas pequenas sin bajar de un minimo legible */
    --titulo-bienvenida: clamp(40px, 6vw, 92px);
    --titulo-ficha: clamp(30px, 4vw, 52px);
    --titulo-seccion: clamp(28px, 3vw, 46px);
    --titulo-cv: clamp(28px, 3vw, 40px);

    /* Rasgos tipograficos del diseno */
    --interletra-titular: -0.036em;
    --interletra-rotulo: 0.2em;
    /* La mono ya nace ancha: con 0.2em los rotulos se deshacen, asi que
       llevan su propia interletra mas corta. */
    --interletra-mono: 0.08em;
    --altura-titular: 1.05;
    --altura-texto: 1.6;
    --altura-parrafo: 1.65;
    /* Para pares de lineas que forman un solo bloque (el nombre y las etiquetas
       de cada trabajo): con 1.6 se separan tanto que dejan de leerse juntas. */
    --altura-compacta: 1.3;

    /* --- Espacios ------------------------------------------------------- */
    --espacio-2: 2px;
    --espacio-4: 4px;
    --espacio-6: 6px;
    --espacio-8: 8px;
    --espacio-10: 10px;
    --espacio-12: 12px;
    --espacio-14: 14px;
    --espacio-16: 16px;
    --espacio-20: 20px;
    --espacio-22: 22px;
    --espacio-24: 24px;
    --espacio-26: 26px;
    --espacio-28: 28px;
    --espacio-32: 32px;
    --espacio-36: 36px;
    --espacio-44: 44px;
    --espacio-48: 48px;
    --espacio-56: 56px;
    --espacio-64: 64px;

    /* --- Radios --------------------------------------------------------- */
    --radio-8: 8px;
    --radio-10: 10px;
    --radio-12: 12px;
    --radio-redondo: 50%;
    --grosor-linea: 1px;

    /* --- Medidas de la interfaz ----------------------------------------- */
    --alto-barra: 56px;   /* el diseno traia 46; se subio para dar aire a la barra */
    --ancho-rail: 60px;
    --ancho-colecciones: 216px;
    --ancho-lista: 352px;
    --ancho-panel-lateral: 440px;
    --ancho-sobre-mi: 1320px;
    --ancho-contacto: 1240px;
    --ancho-cv: 1040px;
    --medida-lectura: 64ch;

    --alto-control: 38px;
    --alto-boton: 44px;
    --alto-boton-grande: 48px;
    --alto-fila: 36px;

    /* --- Sombras -------------------------------------------------------- */
    --sombra-hoja: 0 0 0 1px rgba(23, 23, 26, 0.08), 0 24px 48px -24px rgba(23, 23, 26, 0.25);
    --linea-interior: inset 0 0 0 1px rgba(23, 23, 26, 0.10);

    /* --- Movimiento ----------------------------------------------------- */
    --transicion-rapida: 150ms ease;
    /* Arranca deprisa y frena al final: es la sensacion de los paneles del
       sistema operativo, sin rebote ni desplazamiento. */
    --curva-entrada: cubic-bezier(0.32, 0.72, 0, 1);
    --transicion-entrada: 220ms var(--curva-entrada);
}