/* ============================================================ AEROS — DESIGNTOKENS ------------------------------------------------------------ TRINN 1 av token-migreringen (30.07.2026). ⚠️ DENNE FILA ENDRER INGENTING ENNÅ. Den definerer skalaene som `global.css`, `home.css`, `juno.css` og `woocommerce.css` skal migreres over til, én fil om gangen, med computed-style- diff som port mellom hvert steg. Ingen eksisterende regel er rørt. Lastes den inn uten at noen bruker variablene, skjer det ingenting — det er med vilje. ------------------------------------------------------------ HVORFOR: målt 30.07.2026 over 182 KB tema-CSS gikk 79 % av fargebruken allerede gjennom variabler. Problemet var ikke fargene, men fraværet av en SKALA: krem ble brukt med 26 ulike gjennomsiktigheter, gull med 16. Forskjellen mellom 0,60 og 0,65 er ingen designbeslutning — det er to gjetninger på ulike dager, og det er derfor seksjoner som skal se like ut, ikke gjør det. ⛔ REGELEN HERETTER: ingen ny rå fargeverdi i noen CSS-fil. Trenger du en variant som ikke finnes her, legg den til her som en avledning — ikke som en literal der den brukes. ============================================================ */ :root { /* ── 1 · PRIMITIVER ────────────────────────────────────── De eneste rå fargeverdiene i hele systemet. Kilde: shared/CLAUDE.md → Brand identitet. */ --p-navy: #102030; --p-gold: #C6B996; --p-cream: #FFFBEF; --p-blue: #345A83; /* ── 2 · FLATER ────────────────────────────────────────── 🪤 Verdiene under er BEVISST identiske med dagens literaler, ikke «pene» avledninger. --bg-dark er i dag #0d1a26, som er navy ≈81 % mot sort — ikke et rundt tall. Bytter vi den mot en regnet verdi, flytter flaten seg noen hundredeler, og da er migreringen ikke lenger et refaktor men en redesign. Ryddes eventuelt som egen beslutning. */ --surface-1: var(--p-navy); /* hovedlerret — dagens --bg */ --surface-2: #0d1a26; /* dypere seksjon — dagens --bg-dark */ --surface-3: #0a0a0a; /* hero, dramatikk — dagens --bg-black */ /* ── 3 · BLEKK · krem i fem styrker ────────────────────── Erstatter 26 ad hoc-alfaer. Trinnene er valgt der dagens bruk faktisk klumper seg, så migreringen blir en snapping og ikke en omskriving. */ --ink-1: var(--p-cream); /* primær */ --ink-2: color-mix(in srgb, var(--p-cream) 80%, transparent); /* sekundær */ --ink-3: color-mix(in srgb, var(--p-cream) 62%, transparent); /* dempet */ --ink-4: color-mix(in srgb, var(--p-cream) 42%, transparent); /* svak */ --ink-5: color-mix(in srgb, var(--p-cream) 24%, transparent); /* hint */ /* Kremvask til bakgrunner — erstatter 0.02/0.03/0.04/0.06 */ --wash-1: color-mix(in srgb, var(--p-cream) 6%, transparent); --wash-2: color-mix(in srgb, var(--p-cream) 4%, transparent); --wash-3: color-mix(in srgb, var(--p-cream) 2%, transparent); /* ── 4 · AKSENT · gull ─────────────────────────────────── Gull betyr «dette er sant og viktig». Aldri dekor. */ --acc-1: var(--p-gold); --acc-2: #fff1cb; /* dagens --gold-light */ --acc-line: color-mix(in srgb, var(--p-gold) 20%, transparent); --acc-line-soft: color-mix(in srgb, var(--p-gold) 10%, transparent); --acc-wash: color-mix(in srgb, var(--p-gold) 6%, transparent); /* ── 5 · LYS FLATE · kassen ────────────────────────────── Den ENESTE lyse flaten i systemet. Verdiene ble regnet ut for hånd 30.07 og skrevet rått inn i woocommerce.css — her betales den gjelden tilbake som avledninger. ⚠️ Kontrasten er målt: blekk 14,6:1, aksent 5,2:1 mot --sand-1. Endres --sand-1, MÅ begge regnes på nytt. */ --sand-1: color-mix(in srgb, var(--p-cream) 52%, var(--p-gold)); /* ≈ #E4DBC4 */ --sand-2: color-mix(in srgb, var(--p-cream) 82%, var(--p-gold)); /* ≈ #F5EFDF */ --sand-ink: color-mix(in srgb, var(--p-navy) 88%, #000); /* ≈ #101F2C */ --sand-ink-2: color-mix(in srgb, var(--p-navy) 62%, transparent); --sand-acc: color-mix(in srgb, var(--p-gold) 36%, #2A2010); /* ≈ #625740 */ --sand-line: color-mix(in srgb, var(--p-navy) 22%, transparent); /* ── 6 · STATUS ────────────────────────────────────────── Fantes allerede i koden, men uten navn — derfor kunne de ikke gjenbrukes og ble skrevet på nytt hver gang. */ --status-ok: #50B464; --status-feil: #DC5050; --status-info: #64A0DC; --status-varsel:#C9A84C; /* ── 7 · INTERAKSJON ───────────────────────────────────── */ --ui-1: var(--p-blue); --ui-2: color-mix(in srgb, var(--p-blue) 88%, #000); /* ── 8 · AVSTAND ───────────────────────────────────────── TRINN 2 (31.07.2026). Målt over de seks lastede CSS-filene: 137 seksjons-paddinger fordelt på 14 px-verdier, og NØYAKTIG ÉN av dem brukte clamp(). Verste klynge er 72/76/80 px med 42 bruk — der 76 px finnes én eneste gang. Trinnene under er valgt der bruken allerede klumper seg, ikke etter en matematisk skala. Poenget er at migreringen skal være en snapping, ikke en redesign. */ /* Innvendig avstand: gap, margin mellom elementer. Erstatter klyngen 10/12/13/14 px (47 bruk) med ÉN verdi, og 12/14/16/18/20 px margin-bottom (59 bruk) med to. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; /* Seksjonsbånd: vertikal luft rundt en hel seksjon. TRE valg, ikke fjorten. Verdiene er hentet fra de seksjonene som allerede ser riktige ut — --band er app-seksjonens mål. ⛔ En seksjon setter ALLTID sin egen padding. Å la barnas marginer bære luften er det som gjorde at plattform-lenka på /juno lå med 0 px ned til neste seksjon (målt 31.07). */ --band-tett: clamp(48px, 8vw, 80px); --band: clamp(64px, 11vw, 128px); --band-luft: clamp(78px, 13vw, 150px); /* Sidemargin. Fantes allerede som --edge i style.css og er den ene avstanden som var konsekvent. Beholdes som den er. */ --edge: clamp(16px, 5vw, 72px); /* Lesebredder — i dag skrevet som 52ch/54ch/58ch/60ch/30ch om hverandre uten at forskjellen betyr noe. */ --maal-tekst: 54ch; /* ingress og brødtekst */ --maal-smal: 34ch; /* tekst ved siden av bilde */ --maal-skall: 720px; /* seksjonens innermål */ /* ── 9 · TYPOGRAFI ─────────────────────────────────────── Målt: 412 font-size-deklarasjoner, 89 distinkte verdier. 96 av dem er clamp() — og 56 av clamp-triplene brukes NØYAKTIG ÉN gang. h3 kunne være alt fra 11 til 19 px. Åtte trinn dekker alt som finnes i dag. */ --t-display: clamp(36px, 5vw, 64px); /* side-H1, hero */ --t-h1: clamp(32px, 5.2vw, 52px); --t-h2: clamp(27px, 4.2vw, 42px); --t-h3: clamp(20px, 2.6vw, 26px); --t-lead: clamp(16px, 1.9vw, 18px); /* ingress */ --t-body: 15px; --t-small: 13px; --t-micro: 11px; /* eyebrow, etikett */ /* Linjehøyde. I dag 23 distinkte verdier, der 1,7/1,75/1,8/1,85 alene står for 67 bruk. style.css setter allerede body 1.7 og p 1.8 — de fleste av de 67 overstyrer altså seg selv. */ --lh-tett: 1.15; /* overskrifter */ --lh-lead: 1.85; --lh-body: 1.8; /* Sperring. Versal-båndet har i dag NI nesten like verdier (0.1 til 0.22em, 68 bruk). To er nok. */ --ls-head: 0.032em; /* rolig overskrift-stil, jf. minnet */ --ls-versal: 0.18em; /* eyebrow — mest brukte verdi i dag */ --ls-lenke: 0.16em; /* «se mer»-lenker og knapper */ /* ── 10 · BEVEGELSE ────────────────────────────────────── Sju ulike reveal-implementasjoner er talt opp, med translateY på 34 px ett sted og 11 px et annet, og to ulike IntersectionObserver-terskler (0,4 og 0,32) — samme modul tonet altså inn på ulikt punkt på to sider. */ --mot-loft: 24px; /* reveal-avstand */ --mot-inn: .9s; --mot-ut: .35s; --mot-mykt: cubic-bezier(.2, .7, .2, 1); /* mest brukt i dag */ } /* ── BAKOVERKOMPATIBILITET ───────────────────────────────── Dagens navn peker inn i skalaen, med NØYAKTIG de verdiene de har i dag. Det gjør at filene kan migreres én om gangen uten at noe skifter utseende underveis. 🪤 Ikke «rydd» disse til penere verdier. De er en bro, og broen skal være usynlig. Slettes først når siste fil er migrert og computed-style-diffen er ren. */ :root { --bg: var(--surface-1); --bg-dark: var(--surface-2); --bg-black: var(--surface-3); --gold: var(--acc-1); --gold-light: var(--acc-2); --text: var(--ink-1); --text-muted: var(--ink-1); /* i dag identisk med --text */ --text-dim: var(--ink-1); /* i dag identisk med --text */ --text-faint: rgba(255,251,239,0.6); --border: rgba(198,185,150,0.2); --border-subtle: rgba(198,185,150,0.1); }