/* ============================================================================= OMATEEMA — Design System Base main.css v3.0 Tokenit, reset, typografia, saavutettavuus. Ei komponentteja, ei utilityjä — ne sivukohtaisiin CSS-tiedostoihin. Brändiarvot injektoidaan PHP:llä inlinena, nämä ovat fallbackit. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. FONT FACE Instanssikohtainen. PHP:n inline-injektio ylikirjoittaa --font-family-tokenin. Tuotannossa fonttitiedostot preloadataan :ssa. ----------------------------------------------------------------------------- */ @font-face { font-family: 'Readex Pro'; src: url('../fonts/ReadexPro-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Readex Pro'; src: url('../fonts/ReadexPro-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } /* HUOM: SemiBold (600) ja Bold (700) on yhdistetty Mediumiin (500). Vain kaksi fonttitiedostoa ladataan: Regular ja Medium. Painot --font-semibold ja --font-bold mappautuvat arvoon 500 alla olevassa muuttujamäärittelyssä, joten yksittäisiin sääntöihin ei tarvitse koskea. */ /* ----------------------------------------------------------------------------- 2. RESET ----------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font-family); font-size: var(--text-base); font-weight: var(--font-regular); line-height: var(--leading-normal); color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; font-size: max(1rem, var(--text-base)); /* Safari iOS: ≥16px estää auto-zoomin */ } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* Progressiivinen parannus — ei vaikuta suorituskykyyn, ignoroituu vanhemmissa */ @supports (text-wrap: balance) { h1, h2, h3, h4, h5, h6 { text-wrap: balance; } } @supports (text-wrap: pretty) { p, li { text-wrap: pretty; } } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; } table { border-collapse: collapse; } ::selection { background-color: var(--color-primary-tint-20); color: var(--color-text); } /* ----------------------------------------------------------------------------- 3. DESIGN TOKENS PHP ylikirjoittaa brändikohtaiset arvot inline