/* ─── Reducerad rörelse ─── Respekterar OS-inställningen "Minska rörelse". Orbsen på auth-sidorna animeras inte (till skillnad från startsidan), men knapp-hovers m.m. klämmas ihop här också för konsekvens med resten av sajten. */ @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; } } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { overflow-x: clip; background: var(--bg); } body { font-family: 'Outfit', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; } :root { --bg: #faf9f7; --surface: #ffffff; --amber: #f6c177; --purple: #7c6af7; /* --amber klarar bara 1.56:1 som fristående TEXT mot ljus bakgrund, långt under WCAG-kravet 4.5:1 — fungerar fint som bakgrund/kantlinje, men inte som text. --amber-text/--amber-hover är de kontrastsäkra varianterna, samma värden som redan används i index.css för konsekvens sajt-brett. */ --amber-text: #966615; /* 4.74:1 mot --bg */ --amber-hover: #8f5d1a; /* 5.32:1 mot --bg */ --border: #e8e4df; --muted: #6b6274; /* 5.51:1 mot --bg */ --dim: #75697f; /* 4.89:1 mot --bg */ --text: #2a2531; /* Halvtransparenta ytor (nav, kort, inputfält) behöver egna variabler eftersom CSS inte kan blanda opacitet in i en solid hex-variabel. */ --nav-bg: rgba(255,255,255,0.85); --card-bg: rgba(255,255,255,0.85); --input-bg: #f4f5f7; --input-border: rgba(0,0,0,0.08); --input-autofill-bg: #f4f5f7; /* Statusfärger (fel/success/info) — originalvärdena var alla optimerade för mörk bakgrund och klarade bara 1.66–1.89:1 mot ljus bakgrund. */ --danger-text: #c81e1e; /* 5.45:1 */ --success-text: #1a7a42; /* 5.11:1 */ --info-text: #5b5fc7; /* 5.11:1 */ } body.dark { --bg: #191724; --surface: #1f1d2e; --amber: #f6c177; --purple: #7c6af7; /* I mörkt läge klarar originalfärgen redan gott och väl (10.77:1), så textvarianten kan vara identisk med bas-färgen. */ --amber-text: #f6c177; --amber-hover: #f9d08e; --border: rgba(246,193,119,0.08); --muted: #908caa; --dim: #918cab; --text: #e0def4; --nav-bg: rgba(25,23,36,0.85); --card-bg: rgba(31,29,46,0.7); --input-bg: rgba(25,23,36,0.6); --input-border: rgba(255,255,255,0.08); --input-autofill-bg: #1f1d2e; --danger-text: #fca5a5; --success-text: #4ade80; --info-text: #a5b4fc; } .orb { position: fixed; border-radius: 50%; pointer-events: none; filter: blur(80px); z-index: 0; } .orb-1 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(124,106,247,0.12), transparent 70%); top: -100px; left: -150px; } .orb-2 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(246,193,119,0.08), transparent 70%); bottom: -100px; right: -100px; } @media (max-width: 600px) { .orb { display: none; } } nav { position: relative; z-index: 10; padding: 20px 0; border-bottom: 1px solid var(--border); background: var(--nav-bg); backdrop-filter: blur(20px); } /* Sidorna använder omväxlande .inner och .container som omslag i