/* företagsbevakning — designtokens. * * Enda källan för färg, typografi, spacing och radier. Länkas först av allt i * , före appens egen CSS. * * Appens komponenter sätter färg via inline-stilar som pekar hit * (src/lib/design-tokens.ts), så ett värde behöver bara ändras på ett ställe. */ :root { --fb-ink: #111112; --fb-ink-soft: #3A3A3D; --fb-muted: #6B6B6E; --fb-faint: #9A9A9C; --fb-paper: #F4F4F2; --fb-surface: #FFFFFF; --fb-surface-sunk: #EDEDEA; /* TILLÄGG utöver varumärkespaketets tre ytnivåer. * De finansiella tabellerna behöver varannan-rad-tonat, och steget från * surface till paper är för stort för det — raderna börjar läsas som * grupper i stället för som rader. */ --fb-surface-zebra: #FAFAF9; --fb-line: #E2E2DE; --fb-line-strong: #CFCFC9; --fb-green: #0E6B45; --fb-green-soft: #E4F0EA; --fb-green-line: #B9D8C9; --fb-live: #2BAE76; --fb-amber: #9B5D00; --fb-amber-soft: #F7EEDC; --fb-amber-line: #E4D0A6; --fb-red: #A82A20; --fb-red-soft: #F8E9E7; --fb-red-line: #E8C4BF; --fb-focus: #0E6B45; --fb-font-display: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif; --fb-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --fb-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; --fb-text-xs: 12px; --fb-text-sm: 13px; --fb-text-base: 15px; --fb-text-md: 17px; --fb-text-lg: 21px; --fb-text-xl: 28px; --fb-text-2xl: 38px; --fb-text-3xl: 54px; --fb-track-tight: -0.03em; --fb-track-snug: -0.015em; --fb-track-wide: 0.08em; --fb-leading-tight: 1.1; --fb-leading-snug: 1.35; --fb-leading-body: 1.6; --fb-space-1: 4px; --fb-space-2: 8px; --fb-space-3: 12px; --fb-space-4: 16px; --fb-space-5: 24px; --fb-space-6: 32px; --fb-space-7: 48px; --fb-space-8: 72px; --fb-space-9: 112px; --fb-radius-sm: 6px; --fb-radius: 8px; --fb-radius-lg: 12px; --fb-radius-pill: 999px; --fb-max-width: 1120px; --fb-max-prose: 62ch; --fb-shadow-pop: 0 1px 2px rgba(17, 17, 18, 0.06), 0 8px 24px rgba(17, 17, 18, 0.08); --fb-dur-fast: 120ms; --fb-dur: 180ms; --fb-dur-slow: 320ms; --fb-ease: cubic-bezier(0.2, 0, 0, 1); } /* Mörkt läge — VILANDE. * * Varumärkespaketet levererar det som @media (prefers-color-scheme: dark). Här * ligger det bakom [data-theme="dark"] i stället, alltså avstängt tills någon * medvetet slår på det. Skälet: appen har ännu kvar bakgrunder som sätts direkt * i komponenterna, och ett automatiskt mörkt läge hade gett vita kort på mörkt * papper — sämre än inget mörkt läge alls. * * När resten av färgerna går via tokens: byt raden nedan till * @media (prefers-color-scheme: dark) { :root { … } } * så tänder det sig av sig självt. Värdena är redan rätt. */ :root[data-theme="dark"] { --fb-ink: #F2F2EF; --fb-ink-soft: #CFCFCA; --fb-muted: #94948F; --fb-faint: #6E6E6A; --fb-paper: #0D0D0F; --fb-surface: #16161A; --fb-surface-sunk: #1E1E22; --fb-surface-zebra: #191920; --fb-line: #26262B; --fb-line-strong: #35353B; --fb-green: #4FD1A0; --fb-green-soft: #12291F; --fb-green-line: #1F4535; --fb-live: #34D399; --fb-amber: #E0A94A; --fb-amber-soft: #2A2113; --fb-amber-line: #46381F; --fb-red: #E8837A; --fb-red-soft: #2A1614; --fb-red-line: #452420; --fb-focus: #4FD1A0; --fb-shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.45); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--fb-paper); color: var(--fb-ink); font-family: var(--fb-font-sans); font-size: var(--fb-text-base); line-height: var(--fb-leading-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--fb-font-display); font-weight: 500; letter-spacing: var(--fb-track-tight); line-height: var(--fb-leading-tight); margin: 0; } h1 { font-size: var(--fb-text-3xl); } h2 { font-size: var(--fb-text-2xl); } h3 { font-size: var(--fb-text-lg); letter-spacing: var(--fb-track-snug); } p { margin: 0; max-width: var(--fb-max-prose); } a { color: inherit; text-decoration-color: var(--fb-line-strong); text-underline-offset: 3px; } a:hover { text-decoration-color: currentColor; } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--fb-focus); outline-offset: 2px; border-radius: var(--fb-radius-sm); } /* Registerdata — org.nr, belopp, datum, nyckeltal. Varumärkesregel 3: siffror * ska se ut som siffror hämtade ur ett register. */ .fb-num { font-family: var(--fb-font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; } .fb-eyebrow { font-family: var(--fb-font-mono); font-size: var(--fb-text-xs); letter-spacing: var(--fb-track-wide); text-transform: uppercase; color: var(--fb-muted); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }