/* ============================================================ ServFix 2.0 — Tokensystem (LÅST etter runde 1) Kun variabler. Ingen komponent-CSS. Tre lag, strengt skilt: Lag 1 — nøytral base (lik for alle) Lag 2 — semantiske statusfarger (LÅST, aldri tenant-påvirket) Lag 3 — tenant-aksent (én variabel + avledede varianter) ============================================================ */ :root { /* ------------------------------------------------------------ LAG 1 — NØYTRAL BASE ------------------------------------------------------------ */ /* Flater */ --paper: #F4F6F8; /* app-bakgrunn */ --card: #FFFFFF; /* kort, tabeller, modaler */ --card-subtle: #FAFBFC; /* tabellheader, sekundære flater */ /* Linjer */ --line: #E5E8EC; /* kortkanter, skillelinjer */ --line-soft: #EEF0F2; /* radskiller i tabell */ --line-input: #D6DBE1; /* skjemafelter, chip-knapper */ /* Ink-skala (tekst) */ --ink-1: #1A2029; /* primærtekst, verdier */ --ink-2: #3B4450; /* sekundærtekst, ID-er */ --ink-3: #5A6472; /* metadata, anleggsnavn */ --ink-4: #7A828D; /* kolonneheadere, undertekst */ --ink-5: #9AA3AE; /* placeholder, tomverdier («—») */ /* Skjelett (lastetilstand) */ --skeleton: #EDF0F3; /* Typografi */ --font-ui: 'IBM Plex Sans', sans-serif; --font-mono: 'IBM Plex Mono', monospace; /* ordre-ID og tekniske ID-er */ /* Spacing — 4px-skala */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; /* Radius */ --r-chip: 99px; /* status-chips, piller */ --r-ctrl: 7px; /* knapper, nav-elementer, ikonbrikker */ --r-input: 8px; /* skjemafelter, primærknapp */ --r-card: 10px; /* kort, tabellseksjoner */ /* Skygge */ --shadow-card: 0 1px 2px rgba(16, 20, 26, 0.04); /* Tabelltetthet — token-valg: normal | kompakt. Kompakt er default for tabeller med 30+ rader. */ --row-pad: 10px; /* kompakt: 6px */ --fs-1: 13.5px; /* primær celletekst — kompakt: 12.5px */ --fs-2: 13px; /* sekundær celletekst — kompakt: 12px */ --chip-pad: 6px 11px; /* handlingschips — kompakt: 4px 9px */ /* Skriftgrad i SKJEMAFELT — input, textarea, select (D-ZOOM.1). ⚠️ 16px ER ET GULV, IKKE ET DESIGNVALG. iOS-Safari zoomer inn på et felt med beregnet font-size under 16px ved fokus, og zoomer ALDRI ut igjen: brukeren må klype tilbake for hånd. Målt av eier på iPhone 2026-08-31 — hele app2 utenom innloggingen sto på --fs-1/--fs-2 (13.5/13px). Presedensen fantes i huset og ble ikke båret videre: app2-login.css:138 har hatt `font-size: 16px` med begrunnelsen skrevet rett ved siden av. Tolv andre feltregler manglet den. ALTERNATIVET ER FORKASTET. `user-scalable=no` i viewport-taggen fjerner symptomet ved å frata brukeren zoom overalt — på en flate teknikere bruker i dagslys med hansker er det et dårlig bytte. Viewport-taggene (app2/index.html:5, login.html:5) er riktige som de er og røres ikke. EGET TOKEN, ikke tolv løse 16-tall: regelen blir søkbar, og et felt som mangler den er synlig som et felt uten `var(--fs-felt)`. */ --fs-felt: 16px; /* Sjekklistetetthet (K5) — token-valg: tett. K5-D14 KREVER at 5b implementeres token-drevet «slik at fremtidig komfort-tetthet er et tokensett, ikke en andre layout». Verdiene under er MÅLT fra fasit, ikke valgt: K5-D14s egne tall (68px rad, 34px visuell pille, 48px effektiv flate, 8px dødsone) og resten fra K5-designfila (design/app/K5-sjekkliste.html). ⚠️ ET KOMFORT-SETT ER BEVISST IKKE DEFINERT. Variant 5a er forkastet som modus (K5-D14), så komfortverdiene finnes ingen steder i fasit. Å dikte dem her ville vært å bygge layout nummer to bakveien — nøyaktig det beslutningen avviste. Mekanismen står klar; tallene er en senere eierbeslutning. Derfor ingen komfort-kommentarer under de enkelte tokenene. ⚠️ INGEN KOMMENTARTEGN INNE I DENNE BLOKKA (D-CSS.1). CSS-kommentarer NESTER IKKE: linja over lot før et komplett kommentarpar stå inne i sitatet, og det indre sluttegnet lukket blokka her. Resten av linja ble stående som ugyldig CSS inne i :root, og parseren forkastet fram til neste semikolon — altså hele `--k5-rad-h: 68px`, minstehøyden på ubesvarte sjekklisterader. Feilen var STILL i tre måneder. V6-vakten leser tokens.css med regex og ser bare `--navn:`-mønsteret, ikke om deklarasjonen faktisk overlever en parse. Bokført som forbedringsforslag. */ --k5-rad-h: 68px; /* ubesvart rad, full arbeidsflate (K5-D6) */ --k5-rad-pad: 0 12px; --k5-rad-gap: 8px; /* dødsone mellom utfallene (K5-D14) */ --k5-resultat-h: 46px; /* besvart rad, komprimert resultatlinje */ --k5-resultat-pad: 0 14px; --k5-pille-h: 40px; /* VISUELL pille (K5-D14, hevet 34->40 av D-H15.20) */ --k5-pille-min-w: 72px; /* MINSTE pillebredde (D-H15.23) */ --k5-pille-r: 9px; --k5-treff-h: 48px; /* EFFEKTIV trykkflate rundt pillen (K5-D14) */ --k5-fs-punkt: 16.5px; /* punktnavn i ubesvart rad */ --k5-fs-resultat: 15.5px; /* punktnavn i resultatlinja */ /* K5-D14 REVIDERT ETTER EIERTEST 2026-08-31 (D-CLAMP.1). To linjer kuttet HANDLINGSBÆRENDE tekst i den ekte malen: punktnavnet endte i ellipse midt i setningen, og flaten har ingen ekspander — ingen `title`, ingen «vis mer» (grep i app2-sjekkliste.js: null treff). Den fulle strengen fantes da bare i malen og i rapporten, ikke der teknikeren står. Tre er valgt, ikke fri bryting: radhøyden er `min-height` (app2-sjekkliste.css:155), så raden vokser allerede fritt — det klippet kjøpte var RYTMEN, at lista er skannbar med jevne rader. Fri bryting ville gitt variabel høyde og færre punkter per skjermflate. Tre linjer dekker de aller fleste punktnavnene og beholder rytmen. Full bryting eller en ekspander er bokført til designrunden. */ --k5-punkt-linjer: 3; --k5-punkt-maks-h: 61px; /* tre linjer à 1.22 line-height */ --k5-fs-historikk: 12px; /* font-ghost · historikk (K5-D14) */ --k5-lh-historikk: 16px; /* 12/16px — fasitens tetthetstabell */ /* K7 kvitteringsskjerm (kutt C1). Maalt fra designfasit: hero 21px (med avvik) / 24px (helt ren), kvitteringstittel 26px. */ --k7-fs-hero: 21px; --k7-fs-hero-ren: 24px; --k7-fs-kvittering: 26px; /* ------------------------------------------------------------ LAG 2 — SEMANTISKE STATUSFARGER (LÅST, lik for alle tenants) Systemets språk. Påvirkes ALDRI av tenant-aksent. grønn = OK / lukket / godkjent oransje = venter / pågår / trenger oppmerksomhet rød = KUN høy alvorlighet + forfalt FRIST. «Nytt» er aldri rødt. grå = inaktiv / utkast Presisering (runde 1): alder/ventetid er ikke en frist — alder vises i --ink-3, --status-warn-fg over 10 dager. Aldri rød. ------------------------------------------------------------ */ --status-ok-fg: #16663A; --status-ok-bg: #E4F3E9; --status-warn-fg: #9A5B0B; --status-warn-bg: #FCEEDD; --status-danger-fg: #A82E2A; --status-danger-bg: #FCE7E6; --status-muted-fg: #5A6472; --status-muted-bg: #EEF0F2; /* ------------------------------------------------------------ LAG 3 — TENANT-AKSENT Én variabel byttes per tenant: --tenant-accent. Styrer KUN identitetsflater: primærknapp, aktiv nav, lenker, logo-område, app-header, fokusringer. Styrer ALDRI: statusfarger, alvorlighet, KPI-semantikk, brødtekst, tabellinnhold. ------------------------------------------------------------ */ --tenant-accent: #2456A6; /* default: ServFix-blå */ /* Avledet automatisk ved tenant-bytte (beregnes i JS, settes her): --tenant-accent-ink Tekst på FYLTE aksentflater. Velges ved å beregne WCAG-kontrast for begge kandidater (hvit #FFFFFF vs mørk ink #10141A) mot aksenten — kandidaten med høyest kontrast vinner. --tenant-accent-strong KONTRASTREGEL: Hvis aksentens kontrast mot hvit bakgrunn er under 3:1, genereres en mørkere variant (RGB skaleres ned til kontrast ≥ 4.5:1). Brukes for fokusringer, lenketekst og aksent-tekst på lys flate. Fylte knapper beholder original- aksenten med --tenant-accent-ink. Har aksenten allerede ≥ 3:1, er strong = aksenten uendret. --tenant-accent-soft Svak identitetsflate (aktiv nav, aktivt KPI-kort, fokus-glow). */ --tenant-accent-ink: #FFFFFF; --tenant-accent-strong: #2456A6; --tenant-accent-soft: color-mix(in oklab, var(--tenant-accent) 8%, #FFFFFF); --acc: #2456A6; --acc-ink: #FFFFFF; --acc-strong: #2456A6; --acc-soft: color-mix(in oklab, var(--acc) 8%, #FFFFFF); }