:root { /* Färger — mörkt skogs-/indigotema */ --color-bg: #0b0d12; --color-bg-alt: #10131a; --color-surface: rgba(255,255,255,.04); --color-surface-border: rgba(255,255,255,.10); --color-text: #f2f1fb; --color-text-muted: rgba(242,241,251,.7); --color-text-faint: rgba(242,241,251,.5); --color-accent: #7c6ef2; --color-accent-dark: #5b4fd6; --color-accent-soft: #a99bff; --gradient-accent: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); /* Typografi — bytt till en varmare, mer "skrivstilsaktig" känsla: Fraunces för rubriker (elegant, lite kalligrafisk via kursiv-vikt), Lora för brödtext (läsbar serif med mjuk karaktär). */ --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif; --font-base: 'Lora', Georgia, 'Times New Roman', serif; --font-size-base: 16px; /* Spacing */ --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-5: 3rem; --space-6: 4.5rem; /* Radier & skuggor */ --radius-sm: .5rem; --radius-md: .85rem; --radius-lg: 1.5rem; --radius-pill: 999px; --shadow-glow: 0 20px 60px rgba(124,110,242,.25); /* Layout */ --container-max: 1200px; --container-narrow: 720px; } /* ============================================================ WCAG-genomgång (sprint 39): globala tillgänglighetsregler. Tidigare fanns synlig fokusindikator bara i forms.css/navbar.css — knappar, sponsor-rutor, badge-tiles och andra interaktiva element i buttons.css/cards.css hade INGEN synlig fokusring alls, vilket gör sajten svår att använda med tangentbord/skärmläsare-navigering. Denna regel ligger i variables.css eftersom den filen redan laddas på absolut alla sidor. ============================================================ */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--color-accent-soft, #a8a0f5); outline-offset: 2px; border-radius: 4px; } /* Hoppa till innehåll — osynlig tills den får tangentbordsfokus. Läggs till i navbar-komponenten som allra första element i . */ .skip-link { position: absolute; top: -999px; left: 0; background: var(--color-accent, #7c6ef2); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--radius-sm) 0; z-index: 9999; font-weight: 600; text-decoration: none; } .skip-link:focus { top: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }