/* ==========================================================================
   base.css
   Perustason tyylit: CSS-muuttujat, resetointi, typografia.
   Näitä muuttujia (--color-*, --space-*, jne.) käytetään kaikissa
   muissa CSS-tiedostoissa, joten tämä tiedosto ladataan aina ensimmäisenä.
   ========================================================================== */

:root {
    /* Värit (oletusarvot - näiden PÄÄLLE ajetaan config.php:n arvot
       includes/theme_vars.php:n kautta jokaisella sivulla) */
    --color-primary: #22C55E;
    --color-primary-hover: #16A34A;
    --color-on-primary: #06210F;
    --color-accent: rgba(34, 197, 94, 0.14);
    --color-bg: #0A0D0B;
    --color-surface: #12160F;
    --color-surface-alt: #171C15;
    --color-text: #F3F5F1;
    --color-text-muted: #9CA69B;
    --color-border: rgba(255, 255, 255, 0.09);

    /* Tilan/tunteen värit */
    --color-success: #22C55E;
    --color-success-bg: rgba(34, 197, 94, 0.14);
    --color-danger: #F87171;
    --color-danger-bg: rgba(248, 113, 113, 0.14);
    --color-info: #22C55E;
    --color-info-bg: rgba(34, 197, 94, 0.14);

    /* Typografia */
    --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Välistys (4px-pohjainen asteikko) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Pyöristykset */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;

    /* Varjot (tummalla taustalla varjon sijaan käytetään enemmän
       rajaviivoja ja hienovaraisia vaaleampia sävyjä - nämä ovat silti
       määriteltynä yhteensopivuuden vuoksi). */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);

    /* Siirtymät */
    --transition-fast: 120ms ease;
    --transition-base: 200ms ease;

    /* Layout */
    --header-height: 64px;
    --container-width: 1120px;
}

/* --------------------------------------------------------------------
   Resetointi
   -------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, dl, dd,
figure {
    margin: 0;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

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

button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

input,
select,
textarea {
    font: inherit;
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

/* --------------------------------------------------------------------
   Perustypografia
   -------------------------------------------------------------------- */

html, body {
    height: 100%;
}

body {
    font-family: var(--font-base);
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-text);
}

/* --------------------------------------------------------------------
   Saavutettavuus: näkyvä fokusrengas näppäimistökäyttäjille
   -------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------
   Kunnioita käyttäjän "vähennä liikettä" -asetusta
   -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}