/* affyring.dk — shared design system. Tokens first; pages use roles, never raw colours. */
:root {
  color-scheme: light dark;
  --bg: #F4F6FB; --surface: #FFFFFF; --border: #D5DDEC; --text: #0B1220; --muted: #55627F;
  --brand: #2456C8; --brand-ink: #FFFFFF; --spark: #0B1220;
  --ok: #0D7A43; --ok-bg: #E6F5EC; --ok-line: #B5DFC6;
  --warn: #8F5600; --warn-bg: #FFF3D8; --warn-line: #F2D596;
  --no: #B42318; --no-bg: #FDECEB; --no-line: #F5C2BD;
  --font-display: 'Familjen Grotesk', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --radius: 14px;
  --night: #0B1220;   /* fast nat-flade til figurer, ens i begge temaer */
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B1220; --surface: #141E34; --border: #24304B; --text: #E8EEFB; --muted: #8E9DBD;
    --brand: #8FB6FF; --brand-ink: #081226; --spark: #FFF3D2;
    --ok: #5EE0AE; --ok-bg: rgba(52,211,153,.10); --ok-line: rgba(52,211,153,.30);
    --warn: #FFC95C; --warn-bg: rgba(251,191,36,.10); --warn-line: rgba(251,191,36,.32);
    --no: #FF8F8F; --no-bg: rgba(248,113,113,.11); --no-line: rgba(248,113,113,.34);
  }
}

@font-face { font-family: 'Familjen Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/familjen-grotesk-latin.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(/fonts/dm-sans-latin.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 300; font-display: swap; src: url(/fonts/dm-sans-italic-300.woff) format('woff'); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }   /* komponentklasser som .btn må ikke overtrumfe hidden */
body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.7; min-height: 100vh; }
h1, h2, h3, .display { font-family: var(--font-display); letter-spacing: -.015em; text-wrap: balance; }
a { color: var(--brand); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

.site-header { display: flex; align-items: center; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1000; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); }
.site-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.logo-mark .ring { stroke: var(--brand); } .logo-mark .spark { fill: var(--spark); }
.site-wordmark { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.site-wordmark span { color: var(--muted); font-weight: 500; }
.site-nav { margin-left: auto; display: flex; gap: 20px; font-size: 14px; }
.site-nav a { color: var(--muted); text-decoration: none; } .site-nav a:hover, .site-nav a[aria-current] { color: var(--text); }

.site-footer { text-align: center; padding: 32px 24px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--border); }
.site-footer a { color: var(--muted); } .site-footer a:hover { color: var(--brand); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); }
.btn { display: inline-block; font: 600 15px/1 var(--font-body); padding: 14px 20px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; text-decoration: none; }
.btn-primary { background: var(--brand); color: var(--brand-ink); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text); }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }

/* Verdict colours — the ONLY place green/amber/red appear. data-state is set by JS or by the page. */
[data-state="ok"]      { --v: var(--ok);   --v-bg: var(--ok-bg);   --v-line: var(--ok-line); }
[data-state="warn"]    { --v: var(--warn); --v-bg: var(--warn-bg); --v-line: var(--warn-line); }
[data-state="no"]      { --v: var(--no);   --v-bg: var(--no-bg);   --v-line: var(--no-line); }
[data-state="unknown"] { --v: var(--muted); --v-bg: var(--surface); --v-line: var(--border); }
.verdict-surface { background: var(--v-bg); border: 1px solid var(--v-line); border-radius: 16px; }
.verdict-ink { color: var(--v); }

/* Map: OSM tiles are light; invert them only at night. */
@media (prefers-color-scheme: dark) { .map-tiles { filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(.9) saturate(.55); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }