@pokela/tokens 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Veli-Matti Pokela
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,50 @@
+# @pokela/tokens
+
+Design-tokenit: **Pokela Portfolio**, versio 1.1.0.
+
+> Tämä paketti on generoitu tiedostosta `tokens.json`. Älä muokkaa sitä
+> käsin — muutokset tehdään lähteeseen ja paketti rakennetaan uudelleen
+> komennolla `npm run paketti`.
+
+## Käyttö
+
+```js
+import tokens, { color, space } from '@pokela/tokens';
+import '@pokela/tokens/tokens.css';
+
+color.light.ink;   // '#101112'
+space['24'];       // '24px'
+```
+
+CSS-muuttujat tulevat `tokens.css`:stä, esimerkiksi `var(--ink)` ja
+`var(--space-24)`. Teema vaihtuu attribuutilla `data-theme`, ja ilman
+sitä se seuraa käyttöjärjestelmää.
+
+## Viennit
+
+- `meta`
+- `modes`
+- `color`
+- `font`
+- `type`
+- `typeScale`
+- `lineHeightScale`
+- `weight`
+- `space`
+- `layout`
+- `border`
+- `icon`
+- `motion`
+
+## Lisenssi
+
+MIT. Koskee tätä pakettia, ei sitä repoa josta se on generoitu.
+
+## Moodit
+
+Moodi on ulottuvuus jolla tokenin arvo vaihtelee.
+
+- `viewport` — base, sm, md, lg
+
+Teema (vaalea/tumma) hoituu CSS:ssä `data-theme`-attribuutilla, joten
+sitä ei tarvitse valita koodista.

package/index.d.ts

@@ -0,0 +1,327 @@
+/* @pokela/tokens — generoitu tiedostosta tokens.json.
+   Älä muokkaa: aja `npm run paketti`. */
+
+export declare const meta: {
+  readonly name: string;
+  readonly version: string;
+  readonly direction: string;
+  readonly defaultTheme: string;
+  readonly source: string;
+};
+
+/**
+ * Moodiakselit: millä ulottuvuuksilla tokenin arvo vaihtelee. minWidth
+ * kertoo myös suunnan — arvot kasvavat alhaalta ylös, eli CSS on
+ * mobile-first.
+ */
+export declare const modes: {
+  readonly viewport: {
+    readonly values: readonly string[];
+    readonly minWidth: {
+      readonly base: string;
+      readonly sm: string;
+      readonly md: string;
+      readonly lg: string;
+    };
+  };
+};
+
+export declare const color: {
+  readonly light: {
+    readonly paper: string;
+    readonly "paper-alt": string;
+    readonly line: string;
+    readonly "line-strong": string;
+    readonly ink: string;
+    readonly "ink-muted": string;
+    readonly "ink-faint": string;
+    readonly "badge-surface": string;
+    readonly "invert-surface": string;
+    readonly "invert-ink": string;
+    readonly "invert-faint": string;
+    readonly "placeholder-base": string;
+    readonly "placeholder-stripe": string;
+    readonly "code-surface": string;
+    readonly "code-ink": string;
+    readonly "code-muted": string;
+    readonly "code-faint": string;
+  };
+  readonly dark: {
+    readonly paper: string;
+    readonly "paper-alt": string;
+    readonly line: string;
+    readonly "line-strong": string;
+    readonly ink: string;
+    readonly "ink-muted": string;
+    readonly "ink-faint": string;
+    readonly "badge-surface": string;
+    readonly "invert-surface": string;
+    readonly "invert-ink": string;
+    readonly "invert-faint": string;
+    readonly "placeholder-base": string;
+    readonly "placeholder-stripe": string;
+    readonly "code-surface": string;
+    readonly "code-ink": string;
+    readonly "code-muted": string;
+    readonly "code-faint": string;
+  };
+};
+
+/**
+ * Fallback on var():n sisällä — muuten puuttuva next/font-muuttuja tekisi
+ * koko määrittelystä epäkelvon.
+ */
+export declare const font: {
+  readonly display: string;
+  readonly ui: string;
+  readonly code: string;
+};
+
+/**
+ * size/lineHeight ovat lg-arvoja (≥1200px). Pienemmät koot ovat kohdassa
+ * typeScale.
+ */
+export declare const type: {
+  readonly "display-xl": {
+    readonly size: string;
+    readonly lineHeight: string;
+    readonly tracking: string;
+    readonly weight: number;
+    readonly font: string;
+    readonly note: string;
+  };
+  readonly "display-l": {
+    readonly size: string;
+    readonly lineHeight: string;
+    readonly tracking: string;
+    readonly weight: number;
+    readonly font: string;
+    readonly note: string;
+  };
+  readonly "display-m": {
+    readonly size: string;
+    readonly lineHeight: string;
+    readonly tracking: string;
+    readonly weight: number;
+    readonly font: string;
+    readonly note: string;
+  };
+  readonly "display-s": {
+    readonly size: string;
+    readonly lineHeight: string;
+    readonly tracking: string;
+    readonly weight: number;
+    readonly font: string;
+    readonly note: string;
+  };
+  readonly "body-l": {
+    readonly size: string;
+    readonly lineHeight: string;
+    readonly weight: number;
+    readonly font: string;
+  };
+  readonly body: {
+    readonly size: string;
+    readonly lineHeight: string;
+    readonly weight: number;
+    readonly font: string;
+  };
+  readonly "body-s": {
+    readonly size: string;
+    readonly lineHeight: string;
+    readonly weight: number;
+    readonly font: string;
+  };
+  readonly meta: {
+    readonly size: string;
+    readonly lineHeight: string;
+    readonly tracking: string;
+    readonly weight: number;
+    readonly transform: string;
+    readonly font: string;
+  };
+  readonly "meta-s": {
+    readonly size: string;
+    readonly lineHeight: string;
+    readonly tracking: string;
+    readonly weight: number;
+    readonly transform: string;
+    readonly font: string;
+  };
+  readonly code: {
+    readonly size: string;
+    readonly lineHeight: string;
+    readonly weight: number;
+    readonly font: string;
+    readonly note: string;
+  };
+};
+
+export declare const typeScale: {
+  readonly "display-xl": {
+    readonly base: string;
+    readonly sm: string;
+    readonly md: string;
+    readonly lg: string;
+  };
+  readonly "display-l": {
+    readonly base: string;
+    readonly sm: string;
+    readonly md: string;
+    readonly lg: string;
+  };
+  readonly "display-m": {
+    readonly base: string;
+    readonly sm: string;
+    readonly md: string;
+    readonly lg: string;
+  };
+  readonly "display-s": {
+    readonly base: string;
+    readonly sm: string;
+    readonly md: string;
+    readonly lg: string;
+  };
+};
+
+/**
+ * Rivivälit breakpointeittain. Vain xl ja l muuttuvat (lg-tasolla
+ * tiukempi).
+ */
+export declare const lineHeightScale: {
+  readonly "display-xl": {
+    readonly base: string;
+    readonly sm: string;
+    readonly md: string;
+    readonly lg: string;
+  };
+  readonly "display-l": {
+    readonly base: string;
+    readonly sm: string;
+    readonly md: string;
+    readonly lg: string;
+  };
+  readonly "display-m": {
+    readonly base: string;
+    readonly sm: string;
+    readonly md: string;
+    readonly lg: string;
+  };
+  readonly "display-s": {
+    readonly base: string;
+    readonly sm: string;
+    readonly md: string;
+    readonly lg: string;
+  };
+};
+
+/**
+ * Nimi = arvo. Vain ladatut leikkaukset: Archivo 400/500/600, Bodoni
+ * 400/500.
+ */
+export declare const weight: {
+  readonly "400": number;
+  readonly "500": number;
+  readonly "600": number;
+};
+
+/**
+ * Nimetty arvon mukaan: --space-24 on 24px. 32/40/48 lisättiin v1.1:ssä
+ * koska sivupohjat käyttivät niitä skaalan ulkopuolelta.
+ */
+export declare const space: {
+  readonly "4": string;
+  readonly "8": string;
+  readonly "12": string;
+  readonly "16": string;
+  readonly "20": string;
+  readonly "24": string;
+  readonly "28": string;
+  readonly "32": string;
+  readonly "36": string;
+  readonly "40": string;
+  readonly "44": string;
+  readonly "48": string;
+  readonly "56": string;
+  readonly "72": string;
+  readonly "96": string;
+  readonly "128": string;
+};
+
+/**
+ * Lukumittoja on yksi: measure (62ch). Se riittää myös 14 pikselin
+ * tekstille, koska ch skaalautuu fonttikoon mukana — sama luku tarkoittaa
+ * suunnilleen samaa merkkimäärää joka koossa. Kaikki muut ch-arvot
+ * sivustolla olivat taittovarmistuksia eivätkä lukumittoja, ja ne on
+ * kirjoitettu pikseleiksi. Harvennettuun metatekstiin ch ei sovi lainkaan:
+ * se ei tunne letter-spacingia, joten 68ch lupasi 68 merkkiä mutta riville
+ * mahtui 35.
+ */
+export declare const layout: {
+  readonly maxWidth: string;
+  readonly pagePadding: {
+    readonly base: string;
+    readonly sm: string;
+    readonly md: string;
+    readonly lg: string;
+  };
+  readonly columns: {
+    readonly base: number;
+    readonly sm: number;
+    readonly md: number;
+    readonly lg: number;
+  };
+  readonly gutter: {
+    readonly base: string;
+    readonly sm: string;
+    readonly md: string;
+    readonly lg: string;
+  };
+  readonly sectionGap: {
+    readonly base: string;
+    readonly sm: string;
+    readonly md: string;
+    readonly lg: string;
+  };
+  readonly tapMin: string;
+  readonly measure: string;
+};
+
+export declare const border: {
+  readonly hairline: string;
+  readonly hairlineStrong: string;
+  readonly radius: string;
+  readonly focusWidth: string;
+  readonly focusOffset: string;
+};
+
+/**
+ * Ikonit piirretään 16×16-ruudukolle ja skaalataan näihin kolmeen kokoon.
+ * Viivanpaksuus ei ole oma tokeninsa vaan border.hairline — ikoni on
+ * piirretty samalla viivalla kuin jokainen reuna. Kaaria ei ole
+ * (border.radius on 0), joten päätteet ovat tylpät ja kulmat terävät.
+ */
+export declare const icon: {
+  readonly s: string;
+  readonly m: string;
+  readonly l: string;
+};
+
+export declare const motion: {
+  readonly duration: {
+    readonly fast: string;
+    readonly base: string;
+    readonly slow: string;
+    readonly reveal: string;
+  };
+  readonly easing: {
+    readonly standard: string;
+    readonly out: string;
+  };
+  readonly reveal: {
+    readonly translate: string;
+  };
+};
+
+declare const _default: { meta: typeof meta; modes: typeof modes; color: typeof color; font: typeof font; type: typeof type; typeScale: typeof typeScale; lineHeightScale: typeof lineHeightScale; weight: typeof weight; space: typeof space; layout: typeof layout; border: typeof border; icon: typeof icon; motion: typeof motion };
+export default _default;

package/index.js

@@ -0,0 +1,326 @@
+/* @pokela/tokens — generoitu tiedostosta tokens.json.
+   Älä muokkaa: aja `npm run paketti`. */
+
+export const meta = {
+  name: "Pokela Portfolio",
+  version: "1.1.0",
+  direction: "1f / 1g — editorial grotesk layout with didone display",
+  defaultTheme: "system (light-dark), override via data-theme",
+  source: "styles/tokens.css — tämä tiedosto on sen koneluettava peili. scripts/check-tokens.mjs valvoo vastaavuutta.",
+};
+
+/**
+ * Moodiakselit: millä ulottuvuuksilla tokenin arvo vaihtelee. minWidth
+ * kertoo myös suunnan — arvot kasvavat alhaalta ylös, eli CSS on
+ * mobile-first.
+ */
+export const modes = {
+  viewport: {
+    values: ["base", "sm", "md", "lg"],
+    minWidth: {
+      base: "0",
+      sm: "600px",
+      md: "900px",
+      lg: "1200px",
+    },
+  },
+};
+
+export const color = {
+  light: {
+    paper: "#FFFFFF",
+    "paper-alt": "#FAFAF8",
+    line: "#E8E8E6",
+    "line-strong": "#101112",
+    ink: "#101112",
+    "ink-muted": "#45464A",
+    "ink-faint": "#6A6C6E",
+    "badge-surface": "#EDEDEA",
+    "invert-surface": "#101112",
+    "invert-ink": "#F4F4F2",
+    "invert-faint": "#B6B8BA",
+    "placeholder-base": "#EFEFEC",
+    "placeholder-stripe": "#E7E7E3",
+    "code-surface": "#101112",
+    "code-ink": "#F4F4F2",
+    "code-muted": "#A8ABAD",
+    "code-faint": "#8A8D90",
+  },
+  dark: {
+    paper: "#0E0F10",
+    "paper-alt": "#16181A",
+    line: "#262829",
+    "line-strong": "#F4F4F2",
+    ink: "#F4F4F2",
+    "ink-muted": "#B9BCBF",
+    "ink-faint": "#9A9DA1",
+    "badge-surface": "#232527",
+    "invert-surface": "#F4F4F2",
+    "invert-ink": "#0E0F10",
+    "invert-faint": "#4A4C4E",
+    "placeholder-base": "#1B1D1F",
+    "placeholder-stripe": "#16181A",
+    "code-surface": "#1B1D1F",
+    "code-ink": "#F4F4F2",
+    "code-muted": "#A8ABAD",
+    "code-faint": "#8A8D90",
+  },
+};
+
+/**
+ * Fallback on var():n sisällä — muuten puuttuva next/font-muuttuja tekisi
+ * koko määrittelystä epäkelvon.
+ */
+export const font = {
+  display: "var(--font-bodoni, 'Bodoni Moda'), Georgia, serif",
+  ui: "var(--font-archivo, 'Archivo'), Helvetica, Arial, sans-serif",
+  code: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+};
+
+/**
+ * size/lineHeight ovat lg-arvoja (≥1200px). Pienemmät koot ovat kohdassa
+ * typeScale.
+ */
+export const type = {
+  "display-xl": {
+    size: "136px",
+    lineHeight: "0.88",
+    tracking: "-0.02em",
+    weight: 400,
+    font: "display",
+    note: "wordmark / etusivun nimi",
+  },
+  "display-l": {
+    size: "82px",
+    lineHeight: "0.96",
+    tracking: "-0.005em",
+    weight: 400,
+    font: "display",
+    note: "footer-CTA, casesivun otsikko",
+  },
+  "display-m": {
+    size: "46px",
+    lineHeight: "1.12",
+    tracking: "-0.005em",
+    weight: 400,
+    font: "display",
+    note: "väitelause, osion otsikko",
+  },
+  "display-s": {
+    size: "38px",
+    lineHeight: "1",
+    tracking: "-0.005em",
+    weight: 400,
+    font: "display",
+    note: "indeksirivin työn nimi",
+  },
+  "body-l": {
+    size: "17px",
+    lineHeight: "1.65",
+    weight: 400,
+    font: "ui",
+  },
+  body: {
+    size: "16px",
+    lineHeight: "1.65",
+    weight: 400,
+    font: "ui",
+  },
+  "body-s": {
+    size: "14px",
+    lineHeight: "1.6",
+    weight: 400,
+    font: "ui",
+  },
+  meta: {
+    size: "11px",
+    lineHeight: "1.4",
+    tracking: "0.16em",
+    weight: 600,
+    transform: "uppercase",
+    font: "ui",
+  },
+  "meta-s": {
+    size: "10px",
+    lineHeight: "1.4",
+    tracking: "0.2em",
+    weight: 600,
+    transform: "uppercase",
+    font: "ui",
+  },
+  code: {
+    size: "13px",
+    lineHeight: "1.5",
+    weight: 400,
+    font: "code",
+    note: "koodilohko ja inline-koodi",
+  },
+};
+
+export const typeScale = {
+  "display-xl": {
+    base: "52px",
+    sm: "76px",
+    md: "104px",
+    lg: "136px",
+  },
+  "display-l": {
+    base: "40px",
+    sm: "52px",
+    md: "64px",
+    lg: "82px",
+  },
+  "display-m": {
+    base: "28px",
+    sm: "34px",
+    md: "40px",
+    lg: "46px",
+  },
+  "display-s": {
+    base: "26px",
+    sm: "30px",
+    md: "34px",
+    lg: "38px",
+  },
+};
+
+/**
+ * Rivivälit breakpointeittain. Vain xl ja l muuttuvat (lg-tasolla
+ * tiukempi).
+ */
+export const lineHeightScale = {
+  "display-xl": {
+    base: "0.92",
+    sm: "0.92",
+    md: "0.92",
+    lg: "0.88",
+  },
+  "display-l": {
+    base: "1",
+    sm: "1",
+    md: "1",
+    lg: "0.96",
+  },
+  "display-m": {
+    base: "1.12",
+    sm: "1.12",
+    md: "1.12",
+    lg: "1.12",
+  },
+  "display-s": {
+    base: "1",
+    sm: "1",
+    md: "1",
+    lg: "1",
+  },
+};
+
+/**
+ * Nimi = arvo. Vain ladatut leikkaukset: Archivo 400/500/600, Bodoni
+ * 400/500.
+ */
+export const weight = {
+  "400": 400,
+  "500": 500,
+  "600": 600,
+};
+
+/**
+ * Nimetty arvon mukaan: --space-24 on 24px. 32/40/48 lisättiin v1.1:ssä
+ * koska sivupohjat käyttivät niitä skaalan ulkopuolelta.
+ */
+export const space = {
+  "4": "4px",
+  "8": "8px",
+  "12": "12px",
+  "16": "16px",
+  "20": "20px",
+  "24": "24px",
+  "28": "28px",
+  "32": "32px",
+  "36": "36px",
+  "40": "40px",
+  "44": "44px",
+  "48": "48px",
+  "56": "56px",
+  "72": "72px",
+  "96": "96px",
+  "128": "128px",
+};
+
+/**
+ * Lukumittoja on yksi: measure (62ch). Se riittää myös 14 pikselin
+ * tekstille, koska ch skaalautuu fonttikoon mukana — sama luku tarkoittaa
+ * suunnilleen samaa merkkimäärää joka koossa. Kaikki muut ch-arvot
+ * sivustolla olivat taittovarmistuksia eivätkä lukumittoja, ja ne on
+ * kirjoitettu pikseleiksi. Harvennettuun metatekstiin ch ei sovi lainkaan:
+ * se ei tunne letter-spacingia, joten 68ch lupasi 68 merkkiä mutta riville
+ * mahtui 35.
+ */
+export const layout = {
+  maxWidth: "1440px",
+  pagePadding: {
+    base: "20px",
+    sm: "24px",
+    md: "28px",
+    lg: "36px",
+  },
+  columns: {
+    base: 4,
+    sm: 8,
+    md: 12,
+    lg: 12,
+  },
+  gutter: {
+    base: "16px",
+    sm: "20px",
+    md: "24px",
+    lg: "24px",
+  },
+  sectionGap: {
+    base: "48px",
+    sm: "64px",
+    md: "80px",
+    lg: "96px",
+  },
+  tapMin: "44px",
+  measure: "62ch",
+};
+
+export const border = {
+  hairline: "1px",
+  hairlineStrong: "2px",
+  radius: "0px",
+  focusWidth: "2px",
+  focusOffset: "2px",
+};
+
+/**
+ * Ikonit piirretään 16×16-ruudukolle ja skaalataan näihin kolmeen kokoon.
+ * Viivanpaksuus ei ole oma tokeninsa vaan border.hairline — ikoni on
+ * piirretty samalla viivalla kuin jokainen reuna. Kaaria ei ole
+ * (border.radius on 0), joten päätteet ovat tylpät ja kulmat terävät.
+ */
+export const icon = {
+  s: "12px",
+  m: "16px",
+  l: "24px",
+};
+
+export const motion = {
+  duration: {
+    fast: "180ms",
+    base: "220ms",
+    slow: "320ms",
+    reveal: "600ms",
+  },
+  easing: {
+    standard: "cubic-bezier(0.2, 0.8, 0.2, 1)",
+    out: "cubic-bezier(0.16, 1, 0.3, 1)",
+  },
+  reveal: {
+    translate: "12px",
+  },
+};
+
+export default { meta, modes, color, font, type, typeScale, lineHeightScale, weight, space, layout, border, icon, motion };

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@pokela/tokens",
+  "version": "1.1.0",
+  "description": "Design-tokenit: Pokela Portfolio. Generoitu, ei käsin ylläpidetty.",
+  "license": "MIT",
+  "author": "Veli-Matti Pokela",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    },
+    "./tokens.css": "./tokens.css",
+    "./tokens.json": "./tokens.json"
+  },
+  "files": [
+    "index.js",
+    "index.d.ts",
+    "tokens.css",
+    "tokens.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/VeliMattiPokela/pokela.fi.git",
+    "directory": "packages/tokens"
+  }
+}

package/tokens.css

@@ -0,0 +1,260 @@
+/* Pokela — design tokens
+   ------------------------------------------------------------------
+   Väriarvot määritellään kerran parina (-l / -d). Teemanvaihto vain
+   uudelleenohjaa eikä sisällä yhtään väriarvoa, joten vaalea ja
+   tumma eivät voi ajautua erilleen.
+
+   Aksenttiväriä ei ole. Korostus = musta/valkoinen-käännös
+   (--invert-surface / --invert-ink) tai hiljainen --badge-surface.
+   Väri sivulle tulee vain työn kuvista.
+
+   Mobile first: :root on mobiilikoko, min-width kasvattaa.
+   Arvojen lähde: tokens.json. scripts/check-tokens.mjs valvoo että
+   nämä kaksi pysyvät samana.
+
+   Fontit (Google Fonts, OFL): Bodoni Moda 400/500, Archivo 400/500/600.
+*/
+
+:root {
+  color-scheme: light;
+
+  /* ---- type ------------------------------------------------------
+     --font-bodoni / --font-archivo tulevat next/fontista (itse
+     tarjoiltu, ei ulkoista pyyntöä).
+
+     Fallback on var()-funktion SISÄLLÄ, ei sen perässä. Jos
+     --font-bodoni puuttuu, `var(--font-bodoni), 'Bodoni Moda'`
+     tekisi koko määrittelystä epäkelvon (invalid at computed-value
+     time) ja typografia putoaisi selaimen oletusfonttiin ilman
+     virhettä. Tämä muoto kestää sen. */
+  --font-display: var(--font-bodoni, 'Bodoni Moda'), Georgia, serif;
+  --font-ui: var(--font-archivo, 'Archivo'), Helvetica, Arial, sans-serif;
+  /* Koodi on sivustolla toistuva elementti (komponenttinäkymä, /system,
+     Storybook), joten sen pino on token eikä viisi kertaa kirjoitettu
+     lista — joista yksi ehti jo erota muista. */
+  --font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+
+  /* MOBILE FIRST: base = 360–599 px. Isommat koot min-width-kyselyissä. */
+  --text-display-xl: 52px;   --lh-display-xl: 0.92;  --tr-display-xl: -0.02em;
+  --text-display-l: 40px;    --lh-display-l: 1;      --tr-display-l: -0.005em;
+  --text-display-m: 28px;    --lh-display-m: 1.12;   --tr-display-m: -0.005em;
+  --text-display-s: 26px;    --lh-display-s: 1;      --tr-display-s: -0.005em;
+  --text-body-l: 17px;       --lh-body-l: 1.65;
+  --text-body: 16px;         --lh-body: 1.65;   /* älä laske alle 16px: iOS zoomaa inputit */
+  --text-body-s: 14px;       --lh-body-s: 1.6;
+  --text-meta: 11px;         --lh-meta: 1.4;    --tr-meta: 0.16em;
+  --text-meta-s: 10px;       --lh-meta-s: 1.4;  --tr-meta-s: 0.2em;
+  --text-code: 13px;         --lh-code: 1.5;    /* monospace on optisesti isompi kuin body-s */
+  /* Paino on asteikko, koska ladattuja leikkauksia on vain kolme:
+     Archivo 400/500/600, Bodoni 400/500. font-synthesis-weight on
+     pois päältä, joten ladatun ulkopuolinen paino ei lihavoi vaan
+     jää huomaamatta. Nimi on arvo, kuten välistysasteikossa. */
+  --weight-400: 400;
+  --weight-500: 500;
+  --weight-600: 600;
+  --measure: 62ch;           /* lukumitta — ainoa, myös 14px-tekstille */
+
+  /* ---- space (4px perusyksikkö) ----------------------------------
+     Nimetty arvon mukaan, ei juoksevalla numerolla: --space-24 on
+     24px eikä vaadi taulukon muistamista. 32 / 40 / 48 lisättiin
+     koska sivupohjat käyttävät niitä — aiemmin ne jäivät skaalan
+     ulkopuolelle ja päätyivät kovakoodatuiksi.                      */
+  --space-4: 4px;    --space-8: 8px;    --space-12: 12px;  --space-16: 16px;
+  --space-20: 20px;  --space-24: 24px;  --space-28: 28px;  --space-32: 32px;
+  --space-36: 36px;  --space-40: 40px;  --space-44: 44px;  --space-48: 48px;
+  --space-56: 56px;  --space-72: 72px;  --space-96: 96px;  --space-128: 128px;
+
+  /* ---- layout ---------------------------------------------------- */
+  --max-width: 1440px;
+  --page-padding: 20px;
+  --columns: 4;
+  --gutter: 16px;
+  --section-gap: 48px;
+  --tap-min: 44px;
+  --hairline: 1px;
+  /* Korostettu viiva: hoverin ja valitun tilan paksuus. Sama arvo
+     kuin --focus-width, mutta eri asia — focus on saavutettavuutta,
+     tämä on typografiaa, ja ne saavat muuttua toisistaan riippumatta. */
+  --hairline-strong: 2px;
+  --radius: 0px;
+  --focus-width: 2px;
+  --focus-offset: 2px;
+
+  /* ---- ikonit ------------------------------------------------------
+     Ikonit piirretään 16×16-ruudukolle ja skaalataan näihin kolmeen
+     kokoon. Viivanpaksuutta ei ole tässä: se on --hairline, sama viiva
+     jolla jokainen reuna piirretään. Ks. styles/components/icon.css. */
+  --icon-s: 12px;
+  --icon-m: 16px;
+  --icon-l: 24px;
+
+  /* ---- motion ---------------------------------------------------- */
+  --dur-fast: 180ms; --dur-base: 220ms; --dur-slow: 320ms; --dur-reveal: 600ms;
+  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --reveal-shift: 12px;
+
+  /* ---- colour ----------------------------------------------------
+     Arvot määritellään KERRAN parina: -l on vaalea, -d tumma.
+     Teemanvaihto alla vain uudelleenohjaa, eikä sisällä yhtään
+     väriarvoa — siksi vaalea ja tumma eivät voi ajautua erilleen.
+
+     Miksi ei light-dark(): Next 16:n Lightning CSS transpiloi sen
+     omaksi polyfillikseen, joka reagoi vain käyttöjärjestelmän
+     prefers-color-schemeen. Nimenomainen data-theme-valinta jäisi
+     silloin tehottomaksi ja teksti näkymättömiin. Tämä muoto toimii
+     kaikkialla eikä riipu käännösketjusta.
+
+     scripts/check-tokens.mjs valvoo että jokaisella tokenilla on
+     molemmat arvot ja että molemmat vaihtolohkot kattavat saman
+     listan.                                                        */
+  --paper-l: #FFFFFF;          --paper-d: #0E0F10;
+  --paper-alt-l: #FAFAF8;      --paper-alt-d: #16181A;
+  --line-l: #E8E8E6;           --line-d: #262829;
+  --line-strong-l: #101112;    --line-strong-d: #F4F4F2;
+  --ink-l: #101112;            --ink-d: #F4F4F2;
+  --ink-muted-l: #45464A;      --ink-muted-d: #B9BCBF;
+  --ink-faint-l: #6A6C6E;      --ink-faint-d: #9A9DA1;
+  --badge-surface-l: #EDEDEA;  --badge-surface-d: #232527;
+  --invert-surface-l: #101112; --invert-surface-d: #F4F4F2;
+  --invert-ink-l: #F4F4F2;     --invert-ink-d: #0E0F10;
+  --invert-faint-l: #B6B8BA;   --invert-faint-d: #4A4C4E;
+  --placeholder-base-l: #EFEFEC;  --placeholder-base-d: #1B1D1F;
+  --placeholder-stripe-l: #E7E7E3;  --placeholder-stripe-d: #16181A;
+
+  /* Koodipaneeli. Tumma molemmissa teemoissa: koodi on oma
+     artefaktinsa, ei leipätekstiä, ja tumma pinta on se mitä lukija
+     odottaa koodilta. Vaaleassa teemassa se on käännetty pinta,
+     tummassa hieman paperista nostettu. Musteet ovat samat
+     molemmilla, joten korostuksen kartta ei muutu teeman mukana. */
+  --code-surface-l: #101112;   --code-surface-d: #1B1D1F;
+  --code-ink-l: #F4F4F2;       --code-ink-d: #F4F4F2;
+  --code-muted-l: #A8ABAD;     --code-muted-d: #A8ABAD;
+  --code-faint-l: #8A8D90;     --code-faint-d: #8A8D90;
+
+  /* Oletus: vaalea. */
+  --paper: var(--paper-l);
+  --paper-alt: var(--paper-alt-l);
+  --line: var(--line-l);
+  --line-strong: var(--line-strong-l);
+  --ink: var(--ink-l);
+  --ink-muted: var(--ink-muted-l);
+  --ink-faint: var(--ink-faint-l);
+  --badge-surface: var(--badge-surface-l);
+  --invert-surface: var(--invert-surface-l);
+  --invert-ink: var(--invert-ink-l);
+  --invert-faint: var(--invert-faint-l);
+  --placeholder-base: var(--placeholder-base-l);
+  --placeholder-stripe: var(--placeholder-stripe-l);
+  --code-surface: var(--code-surface-l);
+  --code-ink: var(--code-ink-l);
+  --code-muted: var(--code-muted-l);
+  --code-faint: var(--code-faint-l);
+}
+
+/* Tumma paletti. Sama lista kahdesti, mutta ilman yhtäkään
+   väriarvoa — vain uudelleenohjaus. */
+:root[data-theme='dark'] {
+  color-scheme: dark;
+  --paper: var(--paper-d);
+  --paper-alt: var(--paper-alt-d);
+  --line: var(--line-d);
+  --line-strong: var(--line-strong-d);
+  --ink: var(--ink-d);
+  --ink-muted: var(--ink-muted-d);
+  --ink-faint: var(--ink-faint-d);
+  --badge-surface: var(--badge-surface-d);
+  --invert-surface: var(--invert-surface-d);
+  --invert-ink: var(--invert-ink-d);
+  --invert-faint: var(--invert-faint-d);
+  --placeholder-base: var(--placeholder-base-d);
+  --placeholder-stripe: var(--placeholder-stripe-d);
+  --code-surface: var(--code-surface-d);
+  --code-ink: var(--code-ink-d);
+  --code-muted: var(--code-muted-d);
+  --code-faint: var(--code-faint-d);
+}
+
+/* Ilman nimenomaista valintaa seurataan käyttöjärjestelmää. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    color-scheme: dark;
+    --paper: var(--paper-d);
+    --paper-alt: var(--paper-alt-d);
+    --line: var(--line-d);
+    --line-strong: var(--line-strong-d);
+    --ink: var(--ink-d);
+    --ink-muted: var(--ink-muted-d);
+    --ink-faint: var(--ink-faint-d);
+    --badge-surface: var(--badge-surface-d);
+    --invert-surface: var(--invert-surface-d);
+    --invert-ink: var(--invert-ink-d);
+    --invert-faint: var(--invert-faint-d);
+    --placeholder-base: var(--placeholder-base-d);
+    --placeholder-stripe: var(--placeholder-stripe-d);
+    --code-surface: var(--code-surface-d);
+    --code-ink: var(--code-ink-d);
+    --code-muted: var(--code-muted-d);
+    --code-faint: var(--code-faint-d);
+  }
+}
+
+:root[data-theme='light'] { color-scheme: light; }
+
+/* ---- paperi -------------------------------------------------------
+   Sama uudelleenkytkentä kuin tummalla teemalla, mutta medialle eikä
+   mieltymykselle. Ilman tätä tummalla teemalla tulostettaisiin
+   valkoinen teksti valkoiselle paperille: selain ei tulosta taustoja,
+   joten pinta katoaa mutta teksti ei vaihda väriä.
+
+   Viivat ovat paperilla tummempia kuin ruudulla. #E8E8E6 on ruudulla
+   juuri sopiva hiusviiva, mutta painossa se katoaa. */
+@media print {
+  :root,
+  :root[data-theme='dark'],
+  :root[data-theme='light'] {
+    color-scheme: light;
+    --paper: #ffffff;
+    --paper-alt: #ffffff;
+    --line: #b8b8b4;
+    --line-strong: #101112;
+    --ink: #101112;
+    --ink-muted: #3a3b3e;
+    --ink-faint: #56585a;
+    --badge-surface: #ffffff;
+    --invert-surface: #ffffff;
+    --invert-ink: #101112;
+    --invert-faint: #56585a;
+    --placeholder-base: #f2f2f0;
+    --placeholder-stripe: #e9e9e6;
+  }
+}
+
+/* ---- breakpoints (mobile first, min-width) ------------------------
+   base   0–599     4 saraketta, padding 20, yksi palsta
+   sm     600       8 saraketta, padding 24
+   md     900      12 saraketta, padding 28
+   lg     1200     12 saraketta, padding 36, täysi editoriaalinen skaala
+*/
+@media (min-width: 600px) {
+  :root {
+    --page-padding: 24px; --columns: 8; --gutter: 20px; --section-gap: 64px;
+    --text-display-xl: 76px; --text-display-l: 52px;
+    --text-display-m: 34px;  --text-display-s: 30px;
+  }
+}
+@media (min-width: 900px) {
+  :root {
+    --page-padding: 28px; --columns: 12; --gutter: 24px; --section-gap: 80px;
+    --text-display-xl: 104px; --text-display-l: 64px;
+    --text-display-m: 40px;   --text-display-s: 34px;
+  }
+}
+@media (min-width: 1200px) {
+  :root {
+    --page-padding: 36px; --section-gap: 96px;
+    --text-display-xl: 136px; --lh-display-xl: 0.88;
+    --text-display-l: 82px;   --lh-display-l: 0.96;
+    --text-display-m: 46px;   --text-display-s: 38px;
+  }
+}

package/tokens.json

@@ -0,0 +1,284 @@
+{
+  "$meta": {
+    "name": "Pokela Portfolio",
+    "version": "1.1.0",
+    "direction": "1f / 1g — editorial grotesk layout with didone display",
+    "defaultTheme": "system (light-dark), override via data-theme",
+    "source": "styles/tokens.css — tämä tiedosto on sen koneluettava peili. scripts/check-tokens.mjs valvoo vastaavuutta."
+  },
+  "$modes": {
+    "$note": "Moodiakselit: millä ulottuvuuksilla tokenin arvo vaihtelee. minWidth kertoo myös suunnan — arvot kasvavat alhaalta ylös, eli CSS on mobile-first.",
+    "viewport": {
+      "values": [
+        "base",
+        "sm",
+        "md",
+        "lg"
+      ],
+      "minWidth": {
+        "base": "0",
+        "sm": "600px",
+        "md": "900px",
+        "lg": "1200px"
+      }
+    }
+  },
+  "color": {
+    "light": {
+      "paper": "#FFFFFF",
+      "paper-alt": "#FAFAF8",
+      "line": "#E8E8E6",
+      "line-strong": "#101112",
+      "ink": "#101112",
+      "ink-muted": "#45464A",
+      "ink-faint": "#6A6C6E",
+      "badge-surface": "#EDEDEA",
+      "invert-surface": "#101112",
+      "invert-ink": "#F4F4F2",
+      "invert-faint": "#B6B8BA",
+      "placeholder-base": "#EFEFEC",
+      "placeholder-stripe": "#E7E7E3",
+      "code-surface": "#101112",
+      "code-ink": "#F4F4F2",
+      "code-muted": "#A8ABAD",
+      "code-faint": "#8A8D90"
+    },
+    "dark": {
+      "paper": "#0E0F10",
+      "paper-alt": "#16181A",
+      "line": "#262829",
+      "line-strong": "#F4F4F2",
+      "ink": "#F4F4F2",
+      "ink-muted": "#B9BCBF",
+      "ink-faint": "#9A9DA1",
+      "badge-surface": "#232527",
+      "invert-surface": "#F4F4F2",
+      "invert-ink": "#0E0F10",
+      "invert-faint": "#4A4C4E",
+      "placeholder-base": "#1B1D1F",
+      "placeholder-stripe": "#16181A",
+      "code-surface": "#1B1D1F",
+      "code-ink": "#F4F4F2",
+      "code-muted": "#A8ABAD",
+      "code-faint": "#8A8D90"
+    }
+  },
+  "font": {
+    "display": "var(--font-bodoni, 'Bodoni Moda'), Georgia, serif",
+    "ui": "var(--font-archivo, 'Archivo'), Helvetica, Arial, sans-serif",
+    "$note": "Fallback on var():n sisällä — muuten puuttuva next/font-muuttuja tekisi koko määrittelystä epäkelvon.",
+    "code": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
+  },
+  "typeNote": "size/lineHeight ovat lg-arvoja (≥1200px). Pienemmät koot ovat kohdassa typeScale.",
+  "type": {
+    "display-xl": {
+      "size": "136px",
+      "lineHeight": "0.88",
+      "tracking": "-0.02em",
+      "weight": 400,
+      "font": "display",
+      "note": "wordmark / etusivun nimi"
+    },
+    "display-l": {
+      "size": "82px",
+      "lineHeight": "0.96",
+      "tracking": "-0.005em",
+      "weight": 400,
+      "font": "display",
+      "note": "footer-CTA, casesivun otsikko"
+    },
+    "display-m": {
+      "size": "46px",
+      "lineHeight": "1.12",
+      "tracking": "-0.005em",
+      "weight": 400,
+      "font": "display",
+      "note": "väitelause, osion otsikko"
+    },
+    "display-s": {
+      "size": "38px",
+      "lineHeight": "1",
+      "tracking": "-0.005em",
+      "weight": 400,
+      "font": "display",
+      "note": "indeksirivin työn nimi"
+    },
+    "body-l": {
+      "size": "17px",
+      "lineHeight": "1.65",
+      "weight": 400,
+      "font": "ui"
+    },
+    "body": {
+      "size": "16px",
+      "lineHeight": "1.65",
+      "weight": 400,
+      "font": "ui"
+    },
+    "body-s": {
+      "size": "14px",
+      "lineHeight": "1.6",
+      "weight": 400,
+      "font": "ui"
+    },
+    "meta": {
+      "size": "11px",
+      "lineHeight": "1.4",
+      "tracking": "0.16em",
+      "weight": 600,
+      "transform": "uppercase",
+      "font": "ui"
+    },
+    "meta-s": {
+      "size": "10px",
+      "lineHeight": "1.4",
+      "tracking": "0.2em",
+      "weight": 600,
+      "transform": "uppercase",
+      "font": "ui"
+    },
+    "code": {
+      "size": "13px",
+      "lineHeight": "1.5",
+      "weight": 400,
+      "font": "code",
+      "note": "koodilohko ja inline-koodi"
+    }
+  },
+  "weight": {
+    "400": 400,
+    "500": 500,
+    "600": 600
+  },
+  "weightNote": "Nimi = arvo. Vain ladatut leikkaukset: Archivo 400/500/600, Bodoni 400/500.",
+  "typeScale": {
+    "display-xl": {
+      "base": "52px",
+      "sm": "76px",
+      "md": "104px",
+      "lg": "136px"
+    },
+    "display-l": {
+      "base": "40px",
+      "sm": "52px",
+      "md": "64px",
+      "lg": "82px"
+    },
+    "display-m": {
+      "base": "28px",
+      "sm": "34px",
+      "md": "40px",
+      "lg": "46px"
+    },
+    "display-s": {
+      "base": "26px",
+      "sm": "30px",
+      "md": "34px",
+      "lg": "38px"
+    }
+  },
+  "space": {
+    "4": "4px",
+    "8": "8px",
+    "12": "12px",
+    "16": "16px",
+    "20": "20px",
+    "24": "24px",
+    "28": "28px",
+    "32": "32px",
+    "36": "36px",
+    "40": "40px",
+    "44": "44px",
+    "48": "48px",
+    "56": "56px",
+    "72": "72px",
+    "96": "96px",
+    "128": "128px"
+  },
+  "spaceNote": "Nimetty arvon mukaan: --space-24 on 24px. 32/40/48 lisättiin v1.1:ssä koska sivupohjat käyttivät niitä skaalan ulkopuolelta.",
+  "layout": {
+    "maxWidth": "1440px",
+    "pagePadding": {
+      "base": "20px",
+      "sm": "24px",
+      "md": "28px",
+      "lg": "36px"
+    },
+    "columns": {
+      "base": 4,
+      "sm": 8,
+      "md": 12,
+      "lg": 12
+    },
+    "gutter": {
+      "base": "16px",
+      "sm": "20px",
+      "md": "24px",
+      "lg": "24px"
+    },
+    "sectionGap": {
+      "base": "48px",
+      "sm": "64px",
+      "md": "80px",
+      "lg": "96px"
+    },
+    "tapMin": "44px",
+    "measure": "62ch"
+  },
+  "border": {
+    "hairline": "1px",
+    "hairlineStrong": "2px",
+    "radius": "0px",
+    "focusWidth": "2px",
+    "focusOffset": "2px"
+  },
+  "icon": {
+    "s": "12px",
+    "m": "16px",
+    "l": "24px"
+  },
+  "measureNote": "Lukumittoja on yksi: measure (62ch). Se riittää myös 14 pikselin tekstille, koska ch skaalautuu fonttikoon mukana — sama luku tarkoittaa suunnilleen samaa merkkimäärää joka koossa. Kaikki muut ch-arvot sivustolla olivat taittovarmistuksia eivätkä lukumittoja, ja ne on kirjoitettu pikseleiksi. Harvennettuun metatekstiin ch ei sovi lainkaan: se ei tunne letter-spacingia, joten 68ch lupasi 68 merkkiä mutta riville mahtui 35.",
+  "iconNote": "Ikonit piirretään 16×16-ruudukolle ja skaalataan näihin kolmeen kokoon. Viivanpaksuus ei ole oma tokeninsa vaan border.hairline — ikoni on piirretty samalla viivalla kuin jokainen reuna. Kaaria ei ole (border.radius on 0), joten päätteet ovat tylpät ja kulmat terävät.",
+  "motion": {
+    "duration": {
+      "fast": "180ms",
+      "base": "220ms",
+      "slow": "320ms",
+      "reveal": "600ms"
+    },
+    "easing": {
+      "standard": "cubic-bezier(0.2, 0.8, 0.2, 1)",
+      "out": "cubic-bezier(0.16, 1, 0.3, 1)"
+    },
+    "reveal": {
+      "translate": "12px"
+    }
+  },
+  "lineHeightScale": {
+    "display-xl": {
+      "base": "0.92",
+      "sm": "0.92",
+      "md": "0.92",
+      "lg": "0.88"
+    },
+    "display-l": {
+      "base": "1",
+      "sm": "1",
+      "md": "1",
+      "lg": "0.96"
+    },
+    "display-m": {
+      "base": "1.12",
+      "sm": "1.12",
+      "md": "1.12",
+      "lg": "1.12"
+    },
+    "display-s": {
+      "base": "1",
+      "sm": "1",
+      "md": "1",
+      "lg": "1"
+    }
+  },
+  "lineHeightNote": "Rivivälit breakpointeittain. Vain xl ja l muuttuvat (lg-tasolla tiukempi)."
+}