/* base.css – reset + grundtypografi (Source Sans 3) */

/* =========================================================
   0) Typsnitt – Source Sans 3 (woff2, self-hosted)
   ========================================================= */

/* source-sans-3-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/source-sans-3-v19-latin-regular.woff2') format('woff2');
}

/* source-sans-3-italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/source-sans-3-v19-latin-italic.woff2') format('woff2');
}

/* source-sans-3-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/source-sans-3-v19-latin-600.woff2') format('woff2');
}

/* source-sans-3-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/source-sans-3-v19-latin-700.woff2') format('woff2');
}

/* =========================================================
   1) Minimal reset
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; }
img, svg, video { max-width: 100%; height: auto; }

/* =========================================================
   2) CSS-variabler (fylls på i theme.css)
   ========================================================= */
:root {
  --bg: #fff;
  --text: #111;
  --muted: #555;
  --border: rgba(0,0,0,.12);

  --max: 1100px;
  --radius: 14px;

  --space-1: 6px;
  --space-2: 10px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;

  --step--1: clamp(0.92rem, 0.88rem + 0.2vw, 1.0rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.25vw, 1.10rem);
  --step-1:  clamp(1.25rem, 1.10rem + 0.6vw, 1.60rem);
  --step-2:  clamp(1.55rem, 1.25rem + 1.1vw, 2.10rem);
  --step-3:  clamp(1.95rem, 1.45rem + 1.7vw, 2.70rem);
}

/* =========================================================
   3) Grundtypografi
   ========================================================= */
body {
  font-family: 'Source Sans 3', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--step-0);
  line-height: 1.55;
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
}

h1, h2, h3 {
  font-weight: 700;
}

h1 { font-size: var(--step-3); line-height: 1.1; margin: 0 0 var(--space-3); }
h2 { font-size: var(--step-2); line-height: 1.2; margin: 0 0 var(--space-2); }
h3 { font-size: var(--step-1); line-height: 1.25; margin: 0 0 var(--space-2); }

p { margin: 0 0 var(--space-3); }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }

.skip-link {
  position: absolute;
  left: -999px;
  top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.skip-link:focus { left: var(--space-3); }

.muted { color: var(--muted); }
.lead { font-size: var(--step-1); font-weight: 600; }

.wrap {
  width: min(var(--max), 100% - (2 * var(--space-4)));
  margin-inline: auto;
}

.prose {
  max-width: 72ch;
  margin-inline: auto;
}

.list { padding-left: 1.1em; margin: 0; }
.list li { margin: 0 0 var(--space-2); }