/* designprofil – grund för designprofil.se. Kräver tokens.css och buttons.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--dp-bg); color: var(--dp-text); font: 400 var(--dp-fs-base)/var(--dp-lh-body) var(--dp-font); -webkit-font-smoothing: antialiased; }
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
h1 { font-size: var(--dp-fs-2xl); line-height: var(--dp-lh-display); letter-spacing: var(--dp-tracking-display); }
h2 { font-size: var(--dp-fs-xl); line-height: var(--dp-lh-h2); letter-spacing: var(--dp-tracking-h2); }
h3 { font-size: var(--dp-fs-lg); line-height: var(--dp-lh-h3); letter-spacing: var(--dp-tracking-h3); }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.dp-container { width: 100%; max-width: calc(var(--dp-container) + 2 * var(--dp-gutter)); margin: 0 auto; padding: 0 var(--dp-gutter); }
.dp-eyebrow { font: 500 var(--dp-fs-xs)/var(--dp-lh-caption) var(--dp-font); letter-spacing: var(--dp-tracking-caption); text-transform: uppercase; }
.dp-muted { color: var(--dp-text-muted); }
.dp-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dp-skip { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 10px 16px; background: var(--dp-black); color: var(--dp-white); border-radius: var(--dp-radius-pill); }
.dp-skip:focus { top: 8px; }

/* Lucide-ikon inline: <svg class="dp-icon" ...>. Färgen är textens: svart, vit eller Muted. */
.dp-icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.dp-icon--20 { width: 20px; height: 20px; }

/* Foto som fyller sin ruta och behåller kortets bildformat. Zoomar 4 % vid hover. */
.dp-ph { position: relative; display: block; margin: 0; background: var(--dp-fog); border-radius: var(--dp-radius-md); overflow: hidden; }
.dp-ph > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform var(--dp-dur-3) var(--dp-ease); }
.dp-ph:hover > img, a:hover .dp-ph > img { transform: scale(1.04); }

/* Märkning av exempeltext, påhittade case och citat */
.dp-ex { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid currentColor; border-radius: var(--dp-radius-pill); font: 500 .75rem/1 var(--dp-font); letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }

/* Lugn rörelse: synligt utan JS. reveal.js sätter .dp-js på <html> och .is-in när elementet syns. */
.dp-js .dp-reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dp-dur-3) var(--dp-ease), transform var(--dp-dur-3) var(--dp-ease); }
.dp-js .dp-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .dp-js .dp-reveal { opacity: 1; transform: none; }
}