/* ============================================================================ BYTEWORKS — tokens.css PERMANENT FÄRGSYSTEM (v1.1) + övriga design tokens. Detta är sajtens enda källa för råa färgvärden. Regeln är absolut: ▸ Nya publika ByteWorks-sidor och komponenter använder ALLTID detta system. ▸ Inga nya hex-/rgba-värden i base/layout/components/pages/motion/responsive. ▸ Behövs en färg som saknas: uppdatera först systemet här + docs/COLOR-SYSTEM.md. Systemet har två lager: 1. PRIMITIVER (--bw-*) — råvärden. Används aldrig direkt i komponent-CSS, utom där en roll uttryckligen pekar på dem (t.ex. ikonfärg = accent). 2. ROLLER (övriga) — semantiska tokens: ytor, text, linjer, interaktion, gradienter, glöd, status. Komponenter konsumerar roller. Brandpalett enligt Art Direction (låst): Deep Navy #071B33 · Royal Navy #0B2E59 · Cobalt #476AD1 Soft Periwinkle #849BE3 · Titanium #808287 · White #FFFFFF Ingen orange. Inga cream/beige-ytor. Titanium är aldrig textfärg. Alla text/yta-kombinationer nedan är verifierade mot WCAG AA (≥ 4.5:1 normaltext, ≥ 3:1 grafik/fokus). Se docs/COLOR-SYSTEM.md. ========================================================================== */ :root { /* ════ 1. PRIMITIVER ══════════════════════════════════════════════════ */ /* ── Navystegen — den mörka världens tonala trappa ────────────────────── Monotont stigande ljushet. Två pinnar är brand (900, 700); resten är kalibrerade mellansteg som ger kort, paneler och hover verklig separation i stället för "ännu en mörkblå". */ --bw-navy-950: #050F1F; /* Avgrund — golv, footerfade, mediabrunnar */ --bw-navy-900: #071B33; /* Deep Navy (BRAND) — sidans bas */ --bw-navy-850: #081F3C; /* Gradientslut för kort/paneler */ --bw-navy-800: #0A2444; /* Upphöjd yta — kortbas, solida paneler */ --bw-navy-750: #0D2A4F; /* Hover-steg för upphöjda ytor */ --bw-navy-700: #0B2E59; /* Royal Navy (BRAND) — featureytor */ --bw-navy-650: #103263; /* Hög yta — formkort, ramar, dialog (start) */ --bw-navy-600: #133C74; /* Ljusaste navy — endast gradientstopp */ /* ── Blå accenter ───────────────────────────────────────────────────── */ --bw-cobalt-700: #3556B8; /* Länk-hover ljus värld */ --bw-cobalt-500: #476AD1; /* Cobalt (BRAND) — primär accent */ --bw-cobalt-400: #5C7FDE; /* Ljusare cobalt — gradientstopp */ --bw-peri-500: #849BE3; /* Periwinkle (BRAND) — mjuk accent, länkar */ --bw-peri-400: #A6B8EF; /* Länk-hover mörk värld */ /* ── Neutraler ──────────────────────────────────────────────────────── */ --bw-titan-500: #808287; /* Titanium (BRAND) — dekor/materialkänsla. ALDRIG text: 4.5:1 nås inte på royal+. */ --bw-vit: #FFFFFF; /* ── Status (kalla toner som hör hemma i navyvärlden) ───────────────── */ --bw-gron-300: #A9E4C8; /* success-text på mörkt */ --bw-gron-500: #57C79B; /* success-prick/ikon */ --bw-gron-700: #1E7A57; /* success-text på ljust */ --bw-rod-300: #F0A8B4; /* error-text på mörkt */ --bw-rod-500: #D5697A; /* error-ram/prick */ --bw-rod-700: #B0384C; /* error-text på ljust */ --bw-guld-300: #E4C98F; /* warning på mörkt — endast om funktionellt */ --bw-guld-700: #8A6A1F; /* warning på ljust — nödvändigt; ej dekor */ /* ════ 2. YTOR ════════════════════════════════════════════════════════ Sektioner väljer en pinne i trappan. Två intilliggande sektioner får inte stå på samma pinne utan avgränsare — variation skapas tonalt, inte med blur-trick. Kort ligger alltid ≥ 1 steg över sin sektion. */ --yta-djup: var(--bw-navy-950); --yta-sida: var(--bw-navy-900); --yta-hojd: var(--bw-navy-800); /* solid upphöjd yta */ --yta-hojd-hover: var(--bw-navy-750); --yta-royal: var(--bw-navy-700); /* Kort och höga paneler är svagt graderade — aldrig platta fält. */ --yta-kort: linear-gradient(165deg, var(--bw-navy-800), var(--bw-navy-850) 70%); --yta-hog: linear-gradient(170deg, var(--bw-navy-650), var(--bw-navy-850) 78%); /* Brett accentband (t.ex. supportraden) — cobaltton in i royalton. */ --yta-band: linear-gradient(120deg, rgba(71, 106, 209, .20), rgba(11, 46, 89, .55) 60%); /* Inbäddat kort/rad INUTI en redan upphöjd panel (halvtransparent). */ --yta-inbaddad: rgba(6, 20, 41, .55); --yta-inbaddad-hover: rgba(11, 46, 89, .55); /* Formulärfält — solid för förutsägbar kontrast (AA mot --t-plats). */ --yta-falt: #0B2547; /* Ljusa världen — ren och kall. Aldrig cream/beige. */ --yta-ljus: var(--bw-vit); --yta-moln: #F3F6FB; --yta-moln-2: #E9EEF7; /* linjer/fält på ljus yta */ /* Glas — mörkt, subtilt, väl avgränsat. Alltid med --linje-glas. */ --yta-glas: rgba(8, 26, 50, .62); /* chips, flytande UI */ --yta-glas-tat: rgba(6, 20, 40, .78); /* fast header + blur */ --yta-glas-panel: linear-gradient(180deg, rgba(8, 28, 56, .97), rgba(7, 22, 43, .97)); /* ════ 3. TEXT ════════════════════════════════════════════════════════ Tre nivåer per värld. Alla klarar AA på sina tillåtna ytor: mörk värld = hela navystegen (djup→hög), ljus värld = vit + moln. */ --t-hi: #F2F5FB; /* rubriker/starkt på mörkt */ --t-mid: #B9C4DA; /* brödtext på mörkt */ --t-dim: #8FA0BC; /* dämpat/meta på mörkt — AA på ALLA mörka */ --t-ink: #071B33; /* rubriker på ljust (= brand-navy) */ --t-body: #33415C; /* brödtext på ljust */ --t-soft: #5D6B85; /* dämpat på ljust */ --t-plats: #7E92B8; /* placeholder — endast i --yta-falt */ --t-accent: var(--bw-peri-500); /* accenttext/ikon mörk värld */ --t-accent-ljus: var(--bw-cobalt-500); /* accenttext/ikon ljus värld */ --t-pa-accent: var(--bw-vit); /* text/ikon på CTA-ytor */ /* ════ 4. LINJER & AVGRÄNSARE ═════════════════════════════════════════ */ --linje-1: rgba(132, 155, 227, .16); /* subtil — kortkant, separator */ --linje-2: rgba(132, 155, 227, .30); /* stark — hover, aktiv kant */ --linje-3: rgba(132, 155, 227, .45); /* markerad — prickar, dekor */ --linje-ljus-1: rgba(7, 27, 51, .10); --linje-ljus-2: rgba(7, 27, 51, .22); --linje-glas: rgba(132, 155, 227, .22); --linje-cobalt: rgba(71, 106, 209, .22); /* accentram på ljus yta */ --linje-cobalt-2: rgba(71, 106, 209, .40); /* understrykning ljus yta */ --kant-aktiv: var(--bw-peri-500); /* hover-/aktiv kant, mörkt */ --kant-aktiv-ljus: var(--bw-cobalt-500); /* hover-/aktiv kant, ljust */ /* Signatur: tunn ljuslinje i överkant på kort/paneler. */ --topplinje: linear-gradient(90deg, transparent, rgba(132, 155, 227, .40), transparent); --topplinje-ljus: linear-gradient(90deg, transparent, rgba(71, 106, 209, .30), transparent); /* ════ 5. INTERAKTION ═════════════════════════════════════════════════ */ /* Primär CTA. Ändpunkterna är AA-säkrade för vit text (≥ 4.5:1) — därför slutar den ALDRIG i periwinkle. Enda tillåtna knappgradienten. */ --grad-cta: linear-gradient(120deg, #3E5FC5, #4D6FD4); /* Länkar */ --lank: var(--bw-peri-500); /* mörk värld */ --lank-hover: var(--bw-peri-400); --lank-ljus: var(--bw-cobalt-500); /* ljus värld */ --lank-ljus-hover: var(--bw-cobalt-700); /* Fokus — alltid synlig ring, ≥ 3:1 mot intilliggande yta. */ --fokus: var(--bw-peri-500); /* mörk värld */ --fokus-ljus: var(--bw-cobalt-500); /* ljus värld */ --fokus-falt-ram: var(--bw-cobalt-500); --fokus-falt-skugga: 0 0 0 3px rgba(71, 106, 209, .28); /* Textmarkering */ --markering: rgba(71, 106, 209, .45); --markering-ljus: rgba(71, 106, 209, .22); /* ════ 6. ACCENTTONER (fasta alfasteg) ════════════════════════════════ Tre steg per accent — inga fria alfavärden i komponenterna. 1 = viloyta · 2 = ikonbärare/hover · 3 = markerad yta. */ --ton-cobalt-1: rgba(71, 106, 209, .08); --ton-cobalt-2: rgba(71, 106, 209, .14); --ton-cobalt-3: rgba(71, 106, 209, .20); --ton-peri-1: rgba(132, 155, 227, .08); --ton-peri-2: rgba(132, 155, 227, .14); --ton-peri-3: rgba(132, 155, 227, .20); /* ════ 7. GRADIENTER, GLÖD & FONDER ═══════════════════════════════════ Officiella gradienter — skapa inga nya per sida. grad-djup sektionsdjup (hero, kontaktfinal, royal-kapitel) grad-royal feature-/CTA-sektion — max EN per sida grad-accent små dekorytor: etikettstreck, kedjelinjer, illustrationer. ALDRIG bakom vit text/ikon (slutar i peri) — använd grad-cta. grad-text accentord i rubriker (2–4 ord, aldrig brödtext) */ --grad-djup: linear-gradient(180deg, var(--bw-navy-900) 0%, var(--bw-navy-700) 100%); --grad-royal: linear-gradient(160deg, var(--bw-navy-700) 0%, var(--bw-cobalt-500) 130%); --grad-accent: linear-gradient(120deg, var(--bw-cobalt-500) 0%, var(--bw-peri-500) 100%); --grad-text: linear-gradient(100deg, #6E8CE0 0%, #9FB3F0 60%, #849BE3 100%); --grad-vattenmarke: linear-gradient(180deg, rgba(132, 155, 227, .20), rgba(132, 155, 227, 0) 82%); /* Glöd — verktyg, inte standard. Max en stark glöd per viewport. stark: endast box-shadow bakom CTA/glyf · mjuk: radialfält · peri: sekundär */ --glod-stark: rgba(71, 106, 209, .45); --glod-mjuk: rgba(71, 106, 209, .30); --glod-peri: rgba(132, 155, 227, .14); /* Fonder — kompletta atmosfärer för sidtoppar. Återanvänd; komponera inte nya radialkombinationer per sida. */ --fond-aurora: radial-gradient(58% 46% at 78% 18%, rgba(71, 106, 209, .34), transparent 62%), radial-gradient(46% 40% at 12% 8%, rgba(11, 46, 89, .90), transparent 70%), radial-gradient(40% 36% at 88% 78%, rgba(132, 155, 227, .14), transparent 65%), linear-gradient(180deg, #081E3B 0%, var(--bw-navy-900) 58%, var(--bw-navy-950) 100%); --fond-topp: radial-gradient(52% 60% at 82% 0%, rgba(71, 106, 209, .22), transparent 62%), linear-gradient(180deg, #081E3B, var(--bw-navy-900) 70%); --nat-linje: rgba(128, 130, 135, .075); /* linjenätets streck */ /* Överlägg på bild/video. Text på foto kräver scrim-text + --t-hi. */ --scrim-bild: linear-gradient(180deg, transparent 55%, rgba(5, 15, 31, .55)); --scrim-text: linear-gradient(180deg, rgba(7, 27, 51, .35), rgba(7, 27, 51, .72)); --scrim-tung: rgba(4, 11, 22, .78); /* dialog-backdrop */ /* ════ 8. STATUS / FEEDBACK ═══════════════════════════════════════════ Publika UI-behov: formulärsvar, fältfel, case-status. Inget dashboard- system — tonerna är del av navyvärlden. Warning används endast när funktionen kräver det (guld-primitiverna ovan); info = periwinkle. */ --ok-text: var(--bw-gron-300); --ok-prick: var(--bw-gron-500); --ok-ram: rgba(87, 199, 155, .45); --ok-yta: rgba(46, 110, 86, .24); --ok-text-ljus: var(--bw-gron-700); --fel-text: var(--bw-rod-300); --fel-ram: var(--bw-rod-500); --fel-yta: rgba(150, 54, 70, .22); --fel-falt-skugga: 0 0 0 3px rgba(213, 105, 122, .20); --fel-text-ljus: var(--bw-rod-700); --info-text: var(--bw-peri-400); --info-prick: var(--bw-peri-500); /* ════ 9. SKUGGOR ═════════════════════════════════════════════════════ */ --skugga-kort: 0 24px 70px -32px rgba(4, 14, 28, .75); --skugga-lyft: 0 34px 90px -30px rgba(4, 14, 28, .85); --skugga-ljus: 0 24px 60px -34px rgba(7, 27, 51, .28); --skugga-panel: 0 50px 140px -50px rgba(3, 10, 22, .9); --inre-ljus: inset 0 1px 0 rgba(255, 255, 255, .07); /* glaskant */ --inre-ljus-stark: inset 0 1px 0 rgba(255, 255, 255, .22); /* CTA-topp */ /* ════ TYPOGRAFI — PERMANENT SYSTEM (Steg 2) ══════════════════════════ Två röster: en fluid rubrikröst (clamp) och en statisk komponent-/UI- skala. Viktdisciplin: 800 är reserverad för display, H1 och märket. Regler och komponentmatris: docs/TYPOGRAPHY-SYSTEM.md */ --font: 'Manrope', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* ── Vikter — fem officiella roller ─────────────────────────────────── */ --vikt-normal: 400; /* brödtext */ --vikt-medium: 500; /* hjälptext, mjuk sekundär UI */ --vikt-halvfet: 600; /* strong, navigation, sekundär metadata */ --vikt-fet: 700; /* H2–H4, kortrubriker, knappar, versaletiketter */ --vikt-display: 800; /* ENDAST display, H1, wordmark, vattenmärke */ /* ── Fluid rubrikröst (min = mobilkomposition, max nås ~1150px) ─────── */ --text-display: clamp(2.5rem, 1.35rem + 4.9vw, 4.75rem); /* 40 → 76px */ --text-h1: clamp(2.25rem, 1.3rem + 3.4vw, 3.75rem); /* 36 → 60px */ --text-h2: clamp(1.9rem, 1.28rem + 2.1vw, 3rem); /* 30 → 48px */ --text-h3: clamp(1.35rem, 1.18rem + .75vw, 1.85rem); /* 22 → 30px */ --text-lead: clamp(1.125rem, 1.03rem + .4vw, 1.35rem); /* 18 → 22px */ /* ── Statisk komponent-/UI-skala ────────────────────────────────────── */ --text-h4: 1.3rem; /* 20.8px — stora komponentrubriker */ --text-kort: 1.125rem; /* 18px — kortrubriker, processteg */ --text-body: 1.0625rem; /* 17px — brödtext */ --text-ui: 1rem; /* 16px — nav, knappar, fält, taggar */ --text-kompakt: .9375rem; /* 15px — kortbröd, kompakta stycken */ --text-liten: .875rem; /* 14px — sekundärt, bildtext, chips */ --text-meta: .8125rem; /* 13px — versaletiketter, badges */ --text-eyebrow: .75rem; /* 12px — eyebrow/breadcrumb, minsta storlek — endast versal + spärrad */ --text-marke: clamp(4rem, 16vw, 15rem); /* vattenmärke + 404-siffra */ /* ── Radavstånd ─────────────────────────────────────────────────────── */ --lh-display: 1.03; /* display, H1 */ --lh-rubrik: 1.14; /* H2, H3 */ --lh-kort: 1.3; /* H4, kortrubriker */ --lh-lead: 1.5; --lh-body: 1.7; --lh-kompakt: 1.6; /* kortbröd, kompakt text */ --lh-meta: 1.4; /* etiketter, badges */ --lh-kontroll: 1; /* knappar */ --lh-marke: .82; /* vattenmärke/404 (versaler/siffror utan underhäng) */ /* ── Spärrning — optisk kurva (tightare ju större) ──────────────────── */ --ls-display: -.028em; --ls-h1: -.024em; --ls-rubrik: -.018em; /* H2, H3 */ --ls-kort: -.008em; /* H4, kortrubriker, wordmark */ --ls-eyebrow: .16em; /* eyebrow + breadcrumb */ --ls-versal: .09em; /* övriga versaletiketter/badges */ --ls-knapp: .01em; /* knappar, taggar, formlabels */ --ls-marke: -.035em; /* ── Textmått — radlängd ────────────────────────────────────────────── */ --matt-text: 66ch; /* brödtext, artiklar */ --matt-lead: 52ch; /* ingresser */ --matt-ingress: 46ch; /* hero-ingress */ --matt-smal: 42ch; /* footer-om, hjälp, fin text */ /* ── Rundningar (mjuk design) ───────────────────────────────────────── */ --r-ctl: 12px; /* små controls, fält */ --r-btn: 999px; /* knappar — pill */ --r-card: 20px; /* kort */ --r-panel: 28px; /* stora visuella paneler, formulärkort */ --r-hero: 32px; /* ── Spacing (8px-bas) ──────────────────────────────────────────────── */ --s-1: .5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem; --s-5: 3rem; --s-6: 4rem; --s-7: 6rem; --s-8: 8rem; --sekt-y: clamp(5rem, 3.4rem + 5.6vw, 8.75rem); --sekt-y-tat: clamp(3.5rem, 2.6rem + 3vw, 5.5rem); /* ── Bredder ────────────────────────────────────────────────────────── */ --wrap: 1200px; --wrap-vid: 1360px; --kant: clamp(1.25rem, 4vw, 2.5rem); /* ── Z-lager ────────────────────────────────────────────────────────── */ --z-bak: -1; --z-inne: 1; --z-topp: 100; --z-panel: 90; --z-drawer: 150; --z-dialog: 200; /* ── Motion vocabulary ──────────────────────────────────────────────── */ --t-snabb: .18s; --t-mellan: .34s; --t-lugn: .7s; --t-scen: 1.05s; --ease: cubic-bezier(.22, .61, .2, 1); --ease-ut: cubic-bezier(.16, 1, .3, 1); --stagger: 90ms; }