/* Källan v0.1 (preliminär) — gemensam bas för webb och film.
 * Värdena speglar tokens.json. Bygger på Fyren: samma färger, logga och typsnittsfamiljer;
 * nytt är variabla Newsreader (opsz 72) och reglerna för markering, källa och rörelse.
 * Sökvägar till typsnitt är relativa till den här filen. */

@font-face { font-family: "Newsreader"; src: url("fonts/Newsreader-var.woff2") format("woff2"); font-weight: 340 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/Newsreader-Italic-var.woff2") format("woff2"); font-weight: 340 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --k-natt: #0b2926; --k-natt-yta: #163d33; --k-teal: #103c32;
  --k-guld: #c9a96b; --k-guld-ljus: #ddc48e;
  --k-papper: #f6f2ea; --k-papper-upphojd: #fdfbf7; --k-dimma: #e5ebe4;
  --k-linje: #cedbd3; --k-linje-stark: #719187;
  --k-ink: #122b25; --k-ink-dampad: #3f5a4d;
  --k-natt-text: #ffffff; --k-natt-text-dampad: #d9e3dc; --k-natt-linje: rgba(255,255,255,.16);

  --k-serif: "Newsreader", Georgia, serif;
  --k-sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --k-ease-satt: cubic-bezier(.16, 1, .3, 1);
  --k-ease-markera: cubic-bezier(.65, 0, .35, 1);
  --k-ease-lamna: cubic-bezier(.7, 0, .84, 0);
  --k-dur-snabb: 160ms; --k-dur: 320ms; --k-dur-satt: 700ms; --k-dur-markera: 600ms; --k-dur-mat: 1400ms;

  /* roller (papper som standard) */
  --k-bg: var(--k-papper); --k-fg: var(--k-ink); --k-fg2: var(--k-ink-dampad); --k-rule: var(--k-linje);
  --k-etikett: var(--k-teal);
}
.k-natt {
  --k-bg: var(--k-natt); --k-fg: var(--k-natt-text); --k-fg2: var(--k-natt-text-dampad); --k-rule: var(--k-natt-linje);
  --k-etikett: var(--k-natt-text-dampad); /* aldrig guld: guld är bara markering */
}

/* Typografiska roller */
.k-display { font-family: var(--k-serif); font-variation-settings: "opsz" 72; font-weight: 380; letter-spacing: -.02em; line-height: .98; }
.k-natt .k-display { font-weight: 340; }
.k-display em, .k-rubrik em { font-style: italic; }
.k-rubrik { font-family: var(--k-serif); font-variation-settings: "opsz" 72; font-weight: 380; letter-spacing: -.015em; line-height: 1.02; }
.k-citat { font-family: var(--k-serif); font-variation-settings: "opsz" 36; font-weight: 400; line-height: 1.18; }
.k-siffra { font-family: var(--k-serif); font-variation-settings: "opsz" 72; font-weight: 340; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.02em; line-height: .9; }
.k-etikett { font-family: var(--k-sans); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--k-etikett); }
.k-kalla { font-family: var(--k-sans); font-weight: 400; letter-spacing: .01em; font-variant-numeric: tabular-nums; color: var(--k-fg2); }

/* Guldmarkeringen: en redaktionell hårlinje under nedstaplarna, inte ett färgfält.
 * 0,02 em (≈ 2 px vid 112 px rubrik), aldrig tunnare än 1,5 px. v0.1 hade 0,07 em — för tungt (beslut 2026-11-01).
 * Kan ritas fram via --k-mark (0 → 1). */
:root { --k-mark-h: max(1.5px, .02em); --k-linje-h: 1px; --k-linje-film: 1.5px; }
.k-mark {
  --k-mark: 1;
  background-image: linear-gradient(var(--k-guld), var(--k-guld));
  background-repeat: no-repeat;
  background-position: 0 95%;
  background-size: calc(var(--k-mark) * 100%) var(--k-mark-h);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}