/**
 * Pingly Typography Root
 * Description: Määrittää sovelluksen perustypografian käyttäen moderneja natiivipinoja.
 * Optimoitu yksityisyyden (ei ulkoisia latauksia) ja suorituskyvyn ehdoilla.
 * Tehty <3 Kalajoella.
 * Author: Markus Haapasaari / Kaupunkilehti Kalajokinen
 * Version: 1.0
 */

:root {
    /* --- Fonttivaihtoehdot (Natiivit pinot) --- */

    /* Moderni käyttöliittymäfontti (San Francisco, Segoe UI, Roboto...) */
    --pingly-font-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Tekninen fontti (Koodimainen, data-intensiivisiin kohtiin) */
    --pingly-font-technical: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* Elegantti fontti (Serif-tyyli otsikoihin ja korostuksiin) */
    --pingly-font-elegant: ui-serif, Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;

    /* Aktiivinen fontti (oletuksena järjestelmän fontti) */
    --pingly-active-font: var(--pingly-font-system);

    /* --- Dynaamiset koot (Clamp) --- */
    /* Skaalautuu automaattisesti viewportin mukaan */

    --pingly-font-size-small: clamp(0.75rem, 2vw, 0.875rem);  /* 12px - 14px */
    --pingly-font-size-base: clamp(0.95rem, 2vw, 1.05rem);    /* ~15px - 17px */
    --pingly-font-size-large: clamp(1.1rem, 2.5vw, 1.25rem);  /* ~18px - 20px */
    --pingly-font-size-h1: clamp(1.5rem, 4vw, 2.2rem);        /* Otsikot */

    /* --- Rivivälit --- */
    --pingly-line-height-base: 1.6;
    --pingly-line-height-tight: 1.25;
}

body {
    font-family: var(--pingly-active-font);
    font-size: var(--pingly-font-size-base);
    line-height: var(--pingly-line-height-base);
    color: var(--pingly-text-primary);

    /* Tekstin renderöinnin optimointi */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    /* Estetään tekstin koon automaattinen suurennus mobiilissa landscape-tilassa */
    -webkit-text-size-adjust: 100%;
}

/* Semanttiset apuluokat typografialle */
h1, h2, h3 {
    line-height: var(--pingly-line-height-tight);
    font-weight: 700;
}

small {
    font-size: var(--pingly-font-size-small);
}