/* ---- Typsnitt ---- */
@font-face {
  font-family: "Zilla Slab";
  src: url("../fonts/zilla-slab-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Zilla Slab";
  src: url("../fonts/zilla-slab-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("../fonts/work-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("../fonts/work-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* ---- Tokens ---- */
:root {
  --night: #0b1a1f;
  --pine: #16241f;
  --forest: #1f3a36;
  --brass: #b98632;
  --sand: #f5f1e8;

  /* Massing som TEXT. Ren --brass ger bara 2.86:1 mot sand och underkands i
     ljust lage. Genom att blanda mot --ink, som redan vander med dygnsljuset,
     morknar accenten automatiskt pa ljus botten och ljusnar pa mork:
     uppmatt 4.56:1 mot sand och 7.78:1 mot night. Anvand --brass for linjer,
     ramar och ikoner; --brass-text sa fort det ar lasbar text. */
  --brass-text: color-mix(in srgb, var(--brass) 70%, var(--ink));

  /* Dygnsljuset skriver over dessa tva i runtime. Startvarden = gryning. */
  --paper: var(--night);
  --ink: var(--sand);

  --font-display: "Zilla Slab", Georgia, serif;
  --font-body: "Work Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.56rem, 1.4rem + 0.8vw, 2rem);
  --step-3: clamp(1.95rem, 1.7rem + 1.25vw, 2.66rem);
  --step-4: clamp(2.44rem, 2rem + 2.2vw, 3.55rem);
  --step-5: clamp(3.05rem, 2.3rem + 3.75vw, 5.6rem);

  --matt: clamp(1.5rem, 5vw, 4rem);
  --sektion: clamp(4rem, 10vh, 8rem);
  --max: 68rem;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }

/* ---- Bas ---- */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color 300ms linear, color 300ms linear;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
p { max-width: 62ch; text-wrap: pretty; }

/* Siffror i monospace. Detta ar det som ger instrumentkanslan. */
.tal {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.kicker {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  opacity: 0.75;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 2px;
}

.visuellt-dold {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}