/* ========================================================================= GeoFlow AI Research — designtokens Enda källan för färg, typografi, spacing och rörelse. v1.2 · 2026-08-06 Ursprungligen extraherat ur homepage-v1/styles.css 2026-07-30, men den här filen är sedan dess systemets källa — inte dess kopia. Ändra här, inte i enskilda sidor. Allt som ska se ut som GeoFlow importerar den. Maskinläsbar motsvarighet: tokens.json (för Python, rapportgenerator, Figma-import och allt annat som inte läser CSS). ========================================================================= */ :root { /* --------------------------------------------------------------------- FÄRG — kärnpalett Fem värden. Fler än så och systemet slutar vara ett system. --------------------------------------------------------------------- */ --gf-ink: #07090d; /* Primär bakgrund. Nästan svart, aning blå. */ --gf-paper: #e8e5df; /* Primär text på mörkt. Varmvit, inte ren vit.*/ --gf-accent: #c7ff54; /* Limegrön. Signalfärg — sparsamt. */ --gf-blue: #83b9ff; /* Sekundär signal. Data, mätning, referens. */ --gf-muted: #91969d; /* Dämpad text, etiketter. */ /* --------------------------------------------------------------------- FÄRG — ytor Mörka nivåer som skiljer sektioner utan att rita linjer. Lägre nummer = längre bak. --------------------------------------------------------------------- */ --gf-surface-0: #050609; /* Djupast. Boot-skärm, kodblock. */ --gf-surface-1: #0a0c10; /* Kontaktsektion. */ --gf-surface-2: #0b0f14; /* Kort, paneler. */ --gf-surface-3: #0d1319; /* Upphöjt kort. */ --gf-surface-4: #11161c; /* Ljusaste mörka sektionen. */ --gf-surface-5: #0e141b; /* Interaktiv nod, knapp på mörkt. */ /* Accentuerad yta — används när ett kort ska bära slutsatsen. */ --gf-surface-accent: #141d12; /* --------------------------------------------------------------------- FÄRG — ljust läge Används i statement- och metrics-sektionerna, samt i alla tryckta och PDF-baserade leveranser. Accenten byts ut: #c7ff54 är oläslig på papper. --------------------------------------------------------------------- */ --gf-light-bg: #e8e5df; --gf-light-ink: #07090d; --gf-light-body: #5c6266; --gf-light-muted: #676c70; --gf-light-accent: #7b8d67; /* Dämpad grön. Accentens motsvarighet. */ --gf-light-rule: rgba(7, 9, 13, .2); /* --------------------------------------------------------------------- FÄRG — textnivåer på mörk bakgrund Fyra nivåer, fallande vikt. Använd aldrig --gf-paper till brödtext i långa stycken; den är för stark och tröttar ögat. --------------------------------------------------------------------- */ --gf-text-1: #e8e5df; /* Rubriker, betoning. */ --gf-text-2: #c2c4c8; /* Ingress, lede. */ --gf-text-3: #a9aeb4; /* Brödtext. */ --gf-text-4: #8e959d; /* Sekundär, bildtext. */ --gf-text-5: #707780; /* Sidfot, disclaimer. Minsta tillåtna. */ /* --------------------------------------------------------------------- FÄRG — linjer --------------------------------------------------------------------- */ --gf-line: rgba(232, 229, 223, .14); /* Standardavgränsare. */ --gf-line-soft: rgba(232, 229, 223, .07); /* Inom ett kort. */ --gf-line-hard: rgba(255, 255, 255, .1); /* Header, tydlig sektion. */ /* --------------------------------------------------------------------- FÄRG — status Enbart för riskklassificering i produktleveranser (EUDR, klimatrisk). Använd inte som dekor: färgerna ska betyda något. --------------------------------------------------------------------- */ --gf-status-ok: #c7ff54; /* Grön: verifierad, inom tröskel. */ --gf-status-warn: #ffc24d; /* Gul: oklart, kräver granskning. */ --gf-status-alert: #ff6b5a; /* Röd: avvikelse bekräftad. */ --gf-status-unknown: #91969d; /* Grå: otillräcklig data. Aldrig utelämna.*/ /* --------------------------------------------------------------------- TYPOGRAFI — familjer Två typsnitt. Manrope bär allt innehåll; DM Mono bär allt som är mätning, etikett eller kod. Blanda inte rollerna. --------------------------------------------------------------------- */ --gf-font-sans: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; --gf-font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Display. Michroma bär ordmärket och de största rubrikerna — ingenting annat. Snittet finns bara i vikt 400 och kan därför inte bära hierarki: försöker man sätta h3 och brödtext i det kollapsar alla nivåer till en. Tre regler som skiljer det från Manrope: 1. Aldrig negativ spärr. Formerna är redan kvadratiska och maximalt breda; att dra ihop dem gör bara att de kolliderar. 2. Luftigare radavstånd. 0,92 som Manrope tål ger sammanväxta rader. 3. 0,85x storleken. Uppmätt 2026-08-06 är Michroma 62 % bredare än Manrope 600 vid −0,08 em, inte 12 % som tidigare angavs. 0,85 dämpar skillnaden men utjämnar den inte — det skulle kräva 0,60. Skalan är ett estetiskt val. Sätt kortare rader i Michroma. */ --gf-font-display: Michroma, var(--gf-font-sans); /* --------------------------------------------------------------------- TYPOGRAFI — skala Rubriker är fluida (clamp) eftersom de bär layouten. Brödtext är fast. --------------------------------------------------------------------- */ --gf-size-display: clamp(54px, 8vw, 122px); /* Hero h1, Manrope. */ --gf-size-h2: clamp(48px, 7vw, 100px); /* Sektionsrubrik, Manrope. */ --gf-size-h2-sm: clamp(34px, 4.6vw, 62px); /* Rubrik i tätare layout. */ /* Michroma-motsvarigheter. 0,85x för att kompensera den större bredden. */ --gf-size-display-alt: clamp(46px, 6.8vw, 104px); --gf-size-h2-alt: clamp(41px, 6vw, 85px); --gf-size-h2-sm-alt: clamp(29px, 3.9vw, 53px); --gf-size-h3: 22px; --gf-size-lede: 16px; --gf-size-body: 15px; --gf-size-small: 13px; --gf-size-label: 10px; /* DM Mono, versaler. */ --gf-size-micro: 9px; /* DM Mono. Minsta tillåtna storlek. */ /* Radavstånd */ --gf-leading-display: .92; --gf-leading-h2: .94; --gf-leading-h2-sm: .96; /* Tätare layout tål mer luft mellan raderna.*/ --gf-leading-body: 1.7; --gf-leading-tight: 1.6; --gf-leading-display-alt: 1.08; /* Michroma. 0,92 växer ihop raderna. */ /* Teckenavstånd — den negativa spärren i rubriker är kärnan i uttrycket */ --gf-tracking-display: -.08em; --gf-tracking-h2-sm: -.07em; /* Rubrik 2 i tätare layout. */ --gf-tracking-h3: -.04em; --gf-tracking-label: .1em; /* Positiv spärr på versal mono. */ --gf-tracking-button: .09em; --gf-tracking-display-alt: 0; /* Michroma. Aldrig negativ. */ --gf-tracking-wordmark: .02em; /* Ordmärket i header och omslag. */ /* Vikter Ingen vikt över 600 finns i systemet. Undantaget som tidigare gällde varumärkesnamnet i headern föll bort när ordmärket flyttades till Michroma, som bara finns i 400 — se .gf-wordmark längre ner. */ --gf-weight-regular: 400; --gf-weight-medium: 500; --gf-weight-display: 600; /* Rubriker. Aldrig tyngre. */ /* --------------------------------------------------------------------- SPACING Sektionens andningsrum är fluid i sidled (vw) och fast i höjdled. --------------------------------------------------------------------- */ --gf-pad-section: 140px; --gf-pad-section-sm: 92px; --gf-gutter: 8vw; --gf-gutter-sm: 6vw; --gf-space-1: 6px; --gf-space-2: 12px; --gf-space-3: 18px; --gf-space-4: 26px; --gf-space-5: 34px; --gf-space-6: 52px; --gf-space-7: 70px; --gf-header-height: 76px; /* --------------------------------------------------------------------- FORM Systemet har inga rundade hörn. Undantaget är cirklar — punkter, orbits, pulser — där radien är 50 %. Allt däremellan bryter uttrycket. --------------------------------------------------------------------- */ --gf-radius: 0; --gf-radius-round: 50%; --gf-border: 1px; --gf-border-accent: 2px; /* Topplinje på accentuerat kort. */ /* --------------------------------------------------------------------- RÖRELSE Långsam och kontinuerlig, aldrig studsande. Inga easing-kurvor med överskjutning: det här är mätinstrument, inte en leksak. --------------------------------------------------------------------- */ --gf-ease: cubic-bezier(.4, 0, .2, 1); --gf-duration-fast: .3s; --gf-duration-slow: .35s; --gf-duration-boot: 1s; --gf-anim-pulse: 2s; /* Livstecken, statusprick. */ --gf-anim-float: 8s; /* Bakgrundsmärke. */ --gf-anim-orbit: 26s; /* Långsam rotation. */ /* --------------------------------------------------------------------- TEXTUR Filmkornet är inte dekoration — det tar bort den digitala plattheten i de stora mörka ytorna. Opaciteten är kritisk: över .05 syns det som brus, under .02 gör det ingenting. --------------------------------------------------------------------- */ --gf-grain-opacity: .035; /* Dämpning av bakgrundsfilm så att text behåller kontrast ovanpå. */ --gf-film-filter: brightness(.66) contrast(1.06) saturate(1.08); } /* ========================================================================= BASKLASSER Minsta möjliga uppsättning. Sidor bygger vidare, men börjar här. ========================================================================= */ .gf-label, .gf-kicker { font-family: var(--gf-font-mono); font-size: var(--gf-size-label); letter-spacing: var(--gf-tracking-label); text-transform: uppercase; color: var(--gf-muted); } .gf-display { font-size: var(--gf-size-display); line-height: var(--gf-leading-display); letter-spacing: var(--gf-tracking-display); font-weight: var(--gf-weight-display); margin: 0; } /* Rubrikmönstret: två delar, accent på den andra. Det är den bärande retoriska figuren i varumärket — påstående, sedan poäng. */ .gf-display em, .gf-display .gf-accent { color: var(--gf-accent); font-style: normal; } /* Display i Michroma. Lägg klassen på h1 och de största h2 — inte på h3, inte på brödtext. Snittet har en enda vikt och kan inte bära hierarki. */ .gf-display-alt { font-family: var(--gf-font-display); font-weight: var(--gf-weight-regular); font-size: var(--gf-size-display-alt); line-height: var(--gf-leading-display-alt); letter-spacing: var(--gf-tracking-display-alt); margin: 0; } /* Rubrikmönstret gäller även här. Michroma sitter på den största rubriken per sida, och det är just den rubriken som bär påstående + poäng. */ .gf-display-alt em, .gf-display-alt .gf-accent { color: var(--gf-accent); font-style: normal; } /* Ordmärket. Michroma i vikt 400 med svagt positiv spärr — märket bredvid bär den visuella tyngden, texten ska inte konkurrera. */ .gf-wordmark { font-family: var(--gf-font-display); font-weight: var(--gf-weight-regular); letter-spacing: var(--gf-tracking-wordmark); text-transform: none; } .gf-button { display: inline-flex; align-items: center; text-decoration: none; text-transform: uppercase; font-family: var(--gf-font-mono); font-size: var(--gf-size-label); letter-spacing: var(--gf-tracking-button); padding: 15px 18px; border-radius: var(--gf-radius); transition: var(--gf-duration-fast) var(--gf-ease); color: var(--gf-ink); background: var(--gf-accent); } .gf-button:hover { background: #e6ffae; transform: translateY(-2px); } .gf-grain { position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: var(--gf-grain-opacity); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); } @media (prefers-reduced-motion: reduce) { :root { --gf-anim-pulse: 0s; --gf-anim-float: 0s; --gf-anim-orbit: 0s; } }