/* ============================================================================ Turnauspolku — tokens.css (ehdotus, 11.9.2026) ---------------------------------------------------------------------------- YKSI lähde paletille. Ei !importantia. Ei valitsimia, ei komponentteja. Arvot on purettu app.css:n !important-lohkosta (rivit 3777–3807) ja data/custom.css:stä. Koristetokenit saavat takaisin OMAT sävynsä — "litistetty yksi sävy" -ongelma poistuu, koska seitsemän eri nimistä tokenia ei enää osoita samaan vihreään. Käyttöönotto (HR: ensimmäinen askel PR:ssä): 1. Poista app.css:n !important-lohko (rivit ~3777–3807) KOKONAAN. Muuten se voittaa nämä arvot ja mitään ei tapahdu. 2. Tuo tämä tiedosto ensimmäisenä tyylikohteena (ennen custom.css). 3. design_contract.test.ts: tarkista että ydintokenit (--accent, --panel, --fg, --line, --mut) löytyvät täältä — ne ovat pakolliset. Tumma teema: aktivoituu luokalla .theme-dark -elementissä (ks. server.ts:n theme-skripti). Pinnat käännetty, ak sentti pysyy vihreänä, statusvärit säilyvät erillisinä. ========================================================================== */ :root { /* --- Pinnat (neutraalit, lämpimä harmaa) --- */ --bg: oklch(0.973 0.008 95); --panel: oklch(0.995 0.004 95); --panel-soft: oklch(0.95 0.008 95); --tp-surface: oklch(0.973 0.008 95); --tp-surface-2: oklch(0.94 0.008 95); /* --- Teksti --- */ --fg: oklch(0.21 0.012 75); --mut: oklch(0.48 0.014 90); --tp-mut: oklch(0.48 0.014 90); --tp-mut-2: oklch(0.52 0.012 90); /* --- Reunat --- */ --line: oklch(0.88 0.011 92); --tp-line: oklch(0.88 0.011 92); --field-line: oklch(0.21 0.012 75 / 0.06); --public-line: rgba(17, 45, 38, 0.12); /* --- Syvä metsä (pimeä koroste, side-nav, footer) --- */ --ink: oklch(0.23 0.028 160); --tp-ink: oklch(0.23 0.028 160); --tp-ink-text: oklch(0.23 0.028 160); --tp-ink-2: oklch(0.27 0.028 160); --brand-forest: oklch(0.23 0.028 160); --night: oklch(0.18 0.02 160); /* --- BRÄNDI: evergreen (yksi ainoa vihreä, määritelty kerran) --- */ --accent: oklch(0.44 0.082 158); --tp-accent: var(--accent); --brand-green: var(--accent); /* --- Koristetokenit: OMAT sävyt takaisin (ei enää sama vihreä) --- */ --brand-sky: oklch(0.62 0.13 250); /* aito taivaansininen */ --sky: var(--brand-sky); --brand-coral: oklch(0.65 0.17 40); /* aito koralli/oranssi */ --coral: var(--brand-coral); --brand-lime: oklch(0.86 0.19 128); /* kirkas lime, ei vaalea vihreä */ --lime: var(--brand-lime); --gold: oklch(0.78 0.155 70); /* aito kulta */ --amber: var(--gold); /* --- Pehmeät sävykkeet (color-mix, viittaa kanonisiin) --- */ --accent-soft: color-mix(in srgb, var(--accent) 13%, white); --accent-tint: color-mix(in srgb, var(--accent) 7%, white); --tp-accent-soft: color-mix(in srgb, var(--accent) 13%, white); /* --- STATUSVÄRIT: erilliset, eivät seuraa brändiä --- */ --ok: #16834a; /* onnistuminen — vihreä riippumatta brändistä */ --ok-soft: #e9f8ed; --danger: #c73d30; /* virhe / tuhoava */ --danger-soft: #fff0ed; --warning: #8a5d00; /* huomio */ --warning-soft: #fff4d3; --tp-live: #c50220; /* live-ilmaisin (tulospalvelu) */ /* --- Sarjavärikoodi (Okabe-Ito, värisokea-varma — jo hyvät, säilytetään) --- */ --series-c1: #0072b2; --series-c2: #e69f00; --series-c3: #009e73; --series-c4: #d55e00; --series-c5: #cc79a7; --series-c6: #56b4e9; --series-c7: #c9a100; --series-c8: #6b7280; /* --- TV-näyttö (display): tumma, oma todellisuutensa --- */ --display-bg: var(--tp-ink); --display-panel: rgba(255, 255, 255, 0.08); --display-line: rgba(255, 255, 255, 0.16); /* --- Julkinen sivu (seuran brändäämä, omat tokenit) --- */ --public-muted: color-mix(in srgb, var(--fg) 56%, var(--mut)); /* --- Laskeutumat / julkinen lasipinta --- */ --surface-glass: rgba(255, 255, 255, 0.78); /* --- Varjot --- */ --shadow: 0 20px 50px rgba(31, 45, 38, 0.10); --shadow-soft: 0 10px 28px rgba(31, 45, 38, 0.07); /* --- Keskitys / fokus --- */ --focus-ring: 0 0 0 3px rgba(31, 111, 235, 0.24); /* --- Geometria --- */ --radius: 8px; /* --- Typografia --- Archivo ei lataudu Google-fontista (CSP: default-src 'self', ei font-src-poikkeusta). Järjestelmäfontit ensin; jos haluat Archivon, isännöi woff2 paikallisesti (/static/fonts/archivo.woff2) ja lisää @font-face app.css:n kantaan — ei tähän token-tiedostoon. */ --font-heading: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; --font-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; } /* ============================================================================ TUMMA TEEMA (.theme-dark -elementissä) Pinnat käännetty; ak sentti vihreä; statusvärit säilyvät (pehmeät tummenevat). ========================================================================== */ .theme-dark { --bg: oklch(0.21 0.012 75); --panel: oklch(0.25 0.01 80); --panel-soft: oklch(0.23 0.012 78); --tp-surface: oklch(0.21 0.012 75); --tp-surface-2: oklch(0.27 0.01 78); --fg: oklch(0.96 0.004 95); --mut: oklch(0.70 0.01 90); --tp-mut: oklch(0.70 0.01 90); --tp-mut-2: oklch(0.62 0.01 90); --line: oklch(0.34 0.01 90); --tp-line: oklch(0.34 0.01 90); --field-line: oklch(0.96 0.004 95 / 0.08); --public-line: rgba(255, 255, 255, 0.14); --ink: oklch(0.96 0.004 95); --tp-ink: oklch(0.96 0.004 95); --tp-ink-text: oklch(0.96 0.004 95); --tp-ink-2: oklch(0.88 0.006 95); --brand-forest: oklch(0.96 0.004 95); --night: oklch(0.14 0.02 160); /* Ak sentti vihreä pysyy, hieman kirkkaampi tummalla pohjalla */ --accent: oklch(0.52 0.092 158); --tp-accent: var(--accent); --brand-green: var(--accent); --brand-sky: oklch(0.68 0.13 248); --sky: var(--brand-sky); --brand-coral: oklch(0.70 0.16 42); --coral: var(--brand-coral); --brand-lime: oklch(0.88 0.17 128); --lime: var(--brand-lime); --gold: oklch(0.80 0.15 72); --amber: var(--gold); --accent-soft: color-mix(in srgb, var(--accent) 18%, #0a0c0a); --accent-tint: color-mix(in srgb, var(--accent) 10%, #0a0c0a); --tp-accent-soft: color-mix(in srgb, var(--accent) 18%, #0a0c0a); /* Statusvärit: samat sävyt, pehmeät tummentuvat */ --ok: #2bbf6a; --ok-soft: oklch(0.30 0.06 150 / 0.22); --danger: #e85d4e; --danger-soft: oklch(0.35 0.10 30 / 0.22); --warning: #d99a3a; --warning-soft: oklch(0.35 0.08 75 / 0.22); --tp-live: #ff3b30; --display-panel: rgba(255, 255, 255, 0.06); --display-line: rgba(255, 255, 255, 0.14); --public-muted: color-mix(in srgb, var(--fg) 56%, var(--mut)); --surface-glass: rgba(20, 22, 20, 0.80); --shadow: 0 20px 50px rgba(0, 0, 0, 0.45); --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.35); --focus-ring: 0 0 0 3px rgba(120, 220, 120, 0.32); }