/*
Theme Name:   domainfinland
Theme URI:    https://domainfinland.com
Description:  Lapsiteema GeneratePressille. Sisältää design-tokenit (Layer 1) — komponentit asuvat GenerateBlocksin Global Styleissä (Layer 3).
Author:       Myyntitunneli Oy
Template:     generatepress
Version:      1.0.0
License:      GNU General Public License v2 or later
Text Domain:  domainfinland
*/

/* =============================================================
   IBM PLEX SANS — paikallisesti isännöity (SIL OFL)
   Ei ulkoista hakua Googlelta: GDPR + latenssi.
   unicode-range → selain lataa vain tarvitsemansa osajoukon.
   ============================================================= */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* =============================================================
   DESIGN TOKENIT — Layer 1
   -------------------------------------------------------------
   Värit tulevat GeneratePressin Global Colors -paletista
   (--contrast, --base, --accent …). Niitä EI määritellä täällä
   uudelleen: yksi totuuslähde.

   Sääntö: komponentit viittaavat VAIN muuttujiin. Muuttujan
   arvon vaihto on turvallista koko sivustolla; luokan nimen
   vaihto ei ole (rikkoo blokit hiljaisesti).
   ============================================================= */

:root {
  /* --- Välistysskaala (clamp: 420px → 1280px viewport) --------
     Arvot ammattilaiskäytännöstä: vain ylä-/alapadding skaalaa,
     vaakasuuntainen reunus pysyy maltillisena.                 */
  --space-3xs: 0.25rem;                              /* 4px  */
  --space-2xs: 0.5rem;                               /* 8px  */
  --space-xs:  0.75rem;                              /* 12px */
  --space-s:   1rem;                                 /* 16px */
  --space-m:   1.5rem;                               /* 24px */
  --space-l:   2rem;                                 /* 32px */
  --space-xl:  3rem;                                 /* 48px */
  --space-2xl: clamp(3rem, 2.16rem + 3.72vw, 5rem);  /* 48→80  sektio */
  --space-3xl: clamp(3.75rem, 1.92rem + 8.14vw, 7.5rem); /* 60→120 iso sektio */
  --space-inline: clamp(1.25rem, 0.77rem + 1.86vw, 2.5rem); /* 20→40 sivureunus
     Virallinen GP-järjestelmä käyttää 40/30/20 px; MASTER.md tiheys = Spacious. */

  /* --- Typografian skaala ------------------------------------ */
  --text-xs:   0.75rem;
  --text-s:    0.875rem;
  --text-base: 1rem;
  --text-m:    clamp(1.125rem, 1.07rem + 0.23vw, 1.25rem);
  --text-l:    clamp(1.375rem, 1.23rem + 0.58vw, 1.75rem);
  --text-xl:   clamp(1.75rem, 1.46rem + 1.16vw, 2.5rem);
  --text-2xl:  clamp(2.25rem, 1.67rem + 2.33vw, 3.5rem);
  --text-3xl:  clamp(2.75rem, 1.7rem + 4.19vw, 5rem);

  /* --- Rivinvälit ja kirjainväli ------------------------------ */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --tracking-tight: -0.02em;
  --tracking-wide:  0.08em;

  /* --- Fonttipainot (IBM Plex Sans, 2–3 painoa) --------------- */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    600;

  /* --- Muoto -------------------------------------------------- */
  --radius-s: 2px;
  --radius-m: 4px;
  --radius-l: 8px;
  --border-width: 1px;                    /* reunusleveys — erillään fokusrenkaasta */
  --border-hairline: var(--border-width) solid var(--contrast-3);

  /* --- Fokus ja kosketuskohteet (saavutettavuus) --------------- */
  --focus-ring-width: 2px;                /* toistuu 8 komponentissa */
  --focus-ring-offset: 2px;
  --tap-target-min: 2.75rem;              /* 44px — WCAG 2.5.5; rem jotta zoom kasvattaa */

  /* --- Komponenttikohtaiset perusarvot ------------------------- */
  --card-min: 16rem;                      /* korttiruudukon minmax() — määrää sarakemäärän */
  --leading-display: 1.05;                /* vain .df-display; tiukempi kuin --leading-tight */

  /* --- Mitat -------------------------------------------------- */
  --measure-prose: 68ch;   /* luettava rivipituus */
  --measure-narrow: 46ch;

  /* --- Liike (saavutettavuus huomioiden) ---------------------- */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
  }
}

/* =============================================================
   TYPOGRAFIA — Layer 1 jatkuu
   -------------------------------------------------------------
   Yksi totuuslähde: koot, painot ja rivinvälit määritellään VAIN
   täällä, tokenien kautta. GP:n Customizer-typografia jätetään
   tarkoituksella tyhjäksi — kaksi kilpailevaa järjestelmää on
   ammattilaisaineiston yleisin raportoitu ylläpitovirhe.
   ============================================================= */

body {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--contrast);
  background-color: var(--base-3);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--contrast);
  text-wrap: balance;          /* estää yksinäiset sanat riveillä */
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl);  }
h4 { font-size: var(--text-l);   }
h5 { font-size: var(--text-m);   }
h6 { font-size: var(--text-base); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

p { text-wrap: pretty; }

/* Luettava rivipituus sisältöalueella — ei koske layout-kontteja */
.entry-content > p,
.entry-content > ul,
.entry-content > ol { max-width: var(--measure-prose); }

a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover, a:focus-visible { text-decoration-thickness: 2px; }

/* Näkyvä fokus — saavutettavuus, ei poisteta koskaan */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}