/* 05-typography.css — Fundament typograficzny: kroje, skala, domyslne elementy */

/*
 ZASADY

 1. Trzy kroje, trzy role. Zmiana kroju tekstu = podmiana jednej zmiennej nizej.
      --font-display  Syncopate       etykiety sekcji, wersaliki (BLOG, TESTIMONIOS)
      --font-heading  Lora            tytuly: H1 wpisu, naglowki tresci, kafelki
      --font-body     Lato            wszystko pozostale
    Wczesniej bylo piec krojow; Roboto zostal zastapiony przez Lato, a Libre
    Baskerville uzywal go wylacznie martwy arkusz 85-single-post.css.

    UWAGA — nie wracac do Nanum Myeongjo. To krój koreanski, ktorego zestaw
    lacinski NIE ZAWIERA gliłfow á é í ó ú ñ w zadnej z wag (sprawdzone
    pomiarem szerokosci glifu w przegladarce: wszystkie szesc spadalo na
    fallback). Na stronie po hiszpansku oznaczalo to, ze w kazdym tytule
    litery z akcentem renderowaly sie Georgia — innym krojem, ciezszym i o
    innych proporcjach niz reszta slowa ("tráfico", "indemnización").
    Lora ma pelne pokrycie Latin Extended i te sama role w ukladzie.

 2. Rozmiary tylko z tej skali, nigdy "z palca" w pliku kontekstowym.

 3. Skala skaluje sie SZEROKOSCIA okna (clamp z vw), nigdy wysokoscia.
    Poprzednio 17 regul uzywalo vh — przy wysokim oknie naglowek kafelka
    bloga rosl do 49 px i rozpychal siatke poza kontener.

 4. Uzywamy wylacznie wag, ktore realnie wczytujemy (300/400/700).
    Zadnego font-weight: 500 ani 600 — przegladarka syntezowala wtedy
    sztuczne pogrubienie.
*/

:root {
    --font-display: 'Syncopate', sans-serif;
    --font-heading: 'Lora', Georgia, serif;
    --font-body: 'Lato', -apple-system, 'Segoe UI', sans-serif;

    /* Skala. W nawiasie zakres w px przy domyslnym 16 px bazy. */
    --text-sm: 0.9375rem;                                 /* 15     — podpisy, copyright */
    --text-base: 1rem;                                    /* 16     — nawigacja, drobne UI */
    --text-md: 1.125rem;                                  /* 18     — tekst biezacy */
    --text-label: 1.25rem;                                /* 20     — etykiety sekcji */
    --text-lg: 1.375rem;                                  /* 22     — H4 w tresci */
    --text-xl: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);    /* 20–26  — tytul kafelka, H3 */
    --text-2xl: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);   /* 24–36  — H2, lead */
    --text-3xl: clamp(1.875rem, 1.3rem + 2.4vw, 3rem);    /* 30–48  — H1 wpisu */
    --text-hero: clamp(2.75rem, 1.5rem + 4vw, 4.5rem);    /* 44–72  — naglowek powitalny */

    /*
     Szerokosc kolumny wpisu: obraz, tytul, tekst i tabele. --screen-width
     siega 1500 px, co przy 18 px dawalo w tresci ok. 190 znakow w wierszu.

     W rem, nie w ch — ch to szerokosc cyfry "0" w foncie ELEMENTU, wiec
     ta sama deklaracja dawalaby inna szerokosc w akapicie i w naglowku.

     Przelicznik z pomiaru na realnej tresci (/baremo-trafico/, Lato 18 px,
     srednia szerokosc znaku 7,75 px):
       36rem = 74 znaki, 40rem = 83, 44rem = 91, 46rem = 95, 50rem = 103.

     Czysto typograficzne optimum to 65–75 znakow, ale kolumna musi
     pomiescic takze tabele z trzema kolumnami tekstu — stad wartosc
     powyzej tego zakresu. Zmiana tej jednej liczby przestawia caly uklad
     wpisow i dokumentow formalnych.
    */
    --measure: 46rem;                                     /* 736 px ≈ 95 znakow */

    --leading-tight: 1.2;
    --leading-body: 1.7;

    --color-text: #222222;
    --color-link: #16488f;
    --color-accent: #357efc;
}

/* Domyslne dla calego dokumentu — kazdy element bez wlasnej reguly
   dziedziczy krój tekstu zamiast szeryfowego Timesa przegladarki. */
body {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--color-text);
}

/* Naglowki wszedzie tam, gdzie plik kontekstowy nie mowi inaczej. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: var(--leading-tight);
}

/* Dlugie hiszpanskie slowa ("indemnizacion", "Consorcio") potrafily
   rozepchnac kolumne siatki ponad jej udzial — lamiemy je zamiast tego. */
h1, h2, h3, h4, h5, h6, p, li {
    overflow-wrap: break-word;
}

/*
 Kontrolki formularzy nie dziedzicza typografii po rodzicu — przegladarka
 nadaje im wlasny font systemowy, a <textarea> dostaje monospace.

 Na stronie kontaktu bylo to widac wprost: 90-contact.css ustawial krój dla
 ".wpcf7 input", ale nie dla textarea, wiec pole "Mensaje" renderowalo sie
 krojem maszynowym w 13.33 px, podczas gdy etykiety obok mialy Lato.
 Zaden z inputow nie mial tez rozmiaru i wszystkie siedzialy na domyslnych
 13.33 px.

 Rozmiar 18 px ma skutek uboczny, ktory akurat jest pozadany: iOS powieksza
 strone przy wejsciu w pole, gdy tekst ma mniej niz 16 px.
*/
input,
textarea,
select,
button {
    font-family: inherit;
    font-size: var(--text-md);
    line-height: 1.4;
    color: inherit;
}