/**
 * Pingly Base - Variables & Semantics
 * Description: Nollaa selaimen oletustyylit (Reset) ja määrittää globaalit semanttiset muuttujat.
 * Varmistaa yhdenmukaisen renderöinnin kaikilla alustoilla.
 * Tehty <3 Kalajoella.
 * Author: Markus Haapasaari / Kaupunkilehti Kalajokinen
 * Version: 1.0
 */

/* --- Moderni CSS Reset --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden; /* Estetään "bounce" efekti mobiilissa, sovellus hallitsee scrollauksen */
    -webkit-tap-highlight-color: transparent; /* Poistetaan mobiilin harmaa klikkaustausta */
}

body {
    background-color: var(--pingly-bg-main);
    color: var(--pingly-text-primary);
    line-height: 1.5;
    /* Fontit määritellään typography-root.css tiedostossa */
}

/* --- Globaalit apumuuttujat --- */
:root {
    /* Z-Index tasot (Layer Management) */
    --z-background: 0;
    --z-content: 10;
    --z-header: 100;
    --z-overlay: 1000;
    --z-modal: 2000;
    --z-toast: 3000;

    /* Animaatioiden kestot */
    --duration-fast: 0.2s;
    --duration-normal: 0.3s;
    --duration-slow: 0.5s;

    /* Easing funktiot */
    --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
    --ease-entrance: cubic-bezier(0.0, 0.0, 0.2, 1);
    --ease-exit: cubic-bezier(0.4, 0.0, 1, 1);
    --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- Esteettömyys ja fokustyylit --- */
:focus-visible {
    outline: 2px solid var(--pingly-theme-accent);
    outline-offset: 2px;
}

/* --- Lomake-elementtien nollaus --- */
input, button, textarea, select {
    font: inherit;
    color: inherit;
    background: transparent;
    border: none;
    outline: none;
}

img, svg {
    display: block;
    max-width: 100%;
}