/*
  Teman för alla presentationer.

  En presentation väljer tema med data-tema på <html> och anger samma tema i
  presentations.js. Presentationernas egna stilmallar innehåller bara layout
  och använder variablerna här, så ett tema byts utan andra ändringar.

  Varje tema har ett grundläge och ett andra läge som D växlar till
  (data-theme="dark"). För Tavla, som är mörk från början, är det andra läget
  ljust.

  data-tema kan också sättas på ett enskilt element. Samlingssidans kort gör
  så och visas då i presentationens grundläge, oavsett sidans eget tema.
  Elementet behöver sätta color själv, eftersom färg ärvs som färdigt värde.

  Variabler som varje tema sätter:
    --paper, --paper-2, --card       bakgrunder
    --ink, --ink-2, --ink-3, --rule  text och linjer
    --accent, --accent-soft          rubrikrader, svar, markeringar
    --good, --good-soft, --warn, --warn-soft
    --c1, --c2, --c3                 tre kategorifärger, t.ex. lag, regel, norm
    --chapter-bg, --chapter-ink      kapitelsidor och quizstopp
    --shadow
    --f-display, --f-body, --f-ui, --display-style, --claim-style

  Ändras den här filen höjs ?v= i alla presentationer och på samlingssidan.
*/

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --f-serif-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-serif-body: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display: var(--f-serif-display);
  --f-body: var(--f-serif-body);
  --f-ui: var(--f-sans);
  --display-style: normal;
  /* Påståenden och quizfrågor. Inter saknar kursiv, så sansteman sätter normal. */
  --claim-style: italic;
}

/* ---------- Papper: kräm, svart och tegelröd, som en tidning ---------- */

[data-tema="papper"] {
  --paper: #f3eee4;
  --paper-2: #e9e2d4;
  --card: #fbf8f2;
  --ink: #161412;
  --ink-2: #4a443c;
  --ink-3: #8a8173;
  --rule: #cfc5b3;
  --accent: #b5301f;
  --accent-soft: #f0d9d2;
  --good: #2f6b4f;
  --good-soft: #d7e8dc;
  --warn: #a8670c;
  --warn-soft: #f3e3c4;
  --c1: #2c4f86;
  --c2: #9a5f0b;
  --c3: #2f6b4f;
  --chapter-bg: #161412;
  --chapter-ink: #f3eee4;
  --shadow: 0 1px 0 rgba(22, 20, 18, 0.06), 0 18px 40px -24px rgba(22, 20, 18, 0.35);
  --f-display: var(--f-serif-display);
  --f-body: var(--f-serif-body);
  --display-style: normal;
  --claim-style: italic;
  color-scheme: light;
}
[data-tema="papper"][data-theme="dark"] {
  --paper: #14120f;
  --paper-2: #1e1b17;
  --card: #1c1915;
  --ink: #efe8db;
  --ink-2: #c3b9a8;
  --ink-3: #8c8475;
  --rule: #3a352d;
  --accent: #ef6a52;
  --accent-soft: #3d201a;
  --good: #7cc49d;
  --good-soft: #1d3328;
  --warn: #e6a64a;
  --warn-soft: #3a2b14;
  --c1: #8fb0e6;
  --c2: #e6a64a;
  --c3: #7cc49d;
  --chapter-bg: #050403;
  --chapter-ink: #f3eee4;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 18px 40px -24px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}

/* ---------- Tavla: skiffergrön, kritvit och gul ---------- */

[data-tema="tavla"] {
  --paper: #1f2e2a;
  --paper-2: #283a35;
  --card: #263833;
  --ink: #f1efe6;
  --ink-2: #cfd6cf;
  --ink-3: #8fa39b;
  --rule: #3c524b;
  --accent: #e9c46a;
  --accent-soft: #3b3a24;
  --good: #8fd3a8;
  --good-soft: #22392f;
  --warn: #f0a35e;
  --warn-soft: #3e2e1c;
  --c1: #8ec5ff;
  --c2: #e9c46a;
  --c3: #8fd3a8;
  --chapter-bg: #14201d;
  --chapter-ink: #f1efe6;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 18px 40px -24px rgba(0, 0, 0, 0.7);
  --f-display: var(--f-serif-display);
  --f-body: var(--f-serif-body);
  --display-style: normal;
  --claim-style: italic;
  color-scheme: dark;
}
/* Det andra läget är ljust, som en whiteboard. */
[data-tema="tavla"][data-theme="dark"] {
  --paper: #f4f6f2;
  --paper-2: #e7ece6;
  --card: #ffffff;
  --ink: #1f2e2a;
  --ink-2: #42544e;
  --ink-3: #7d8e88;
  --rule: #c9d3cd;
  --accent: #9a6a0a;
  --accent-soft: #f3e6c4;
  --good: #2f6b4f;
  --good-soft: #d7e8dc;
  --warn: #a8670c;
  --warn-soft: #f3e3c4;
  --c1: #2c5f9e;
  --c2: #9a5f0b;
  --c3: #2f6b4f;
  --chapter-bg: #1f2e2a;
  --chapter-ink: #f1efe6;
  --shadow: 0 1px 0 rgba(31, 46, 42, 0.06), 0 18px 40px -24px rgba(31, 46, 42, 0.35);
  color-scheme: light;
}

/* ---------- Arkiv: sepia, mörkbrunt och dov röd, kursiva rubriker ---------- */

[data-tema="arkiv"] {
  --paper: #efe4cf;
  --paper-2: #e4d6bb;
  --card: #f7efde;
  --ink: #2b2118;
  --ink-2: #5a4a3a;
  --ink-3: #8d7b66;
  --rule: #cdbb9c;
  --accent: #8c3b2a;
  --accent-soft: #ecd3c7;
  --good: #4f6b3a;
  --good-soft: #dfe6cf;
  --warn: #9a6a1c;
  --warn-soft: #efdfbd;
  --c1: #3f5a7a;
  --c2: #9a6a1c;
  --c3: #4f6b3a;
  --chapter-bg: #2b2118;
  --chapter-ink: #efe4cf;
  --shadow: 0 1px 0 rgba(43, 33, 24, 0.08), 0 18px 40px -24px rgba(43, 33, 24, 0.4);
  --f-display: var(--f-serif-display);
  --f-body: var(--f-serif-body);
  --display-style: italic;
  --claim-style: italic;
  color-scheme: light;
}
[data-tema="arkiv"][data-theme="dark"] {
  --paper: #1c1611;
  --paper-2: #261e17;
  --card: #231b15;
  --ink: #eadfc8;
  --ink-2: #c4b398;
  --ink-3: #8f7e66;
  --rule: #3d3226;
  --accent: #d07a5f;
  --accent-soft: #3d2219;
  --good: #a3bf8a;
  --good-soft: #26301d;
  --warn: #d9a75a;
  --warn-soft: #3a2c15;
  --c1: #9db6d3;
  --c2: #d9a75a;
  --c3: #a3bf8a;
  --chapter-bg: #0e0a07;
  --chapter-ink: #eadfc8;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 18px 40px -24px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}

/* ---------- Nordisk: ljust gråblått, marin och klarblå, rubriker i Inter ---------- */

[data-tema="nordisk"] {
  --paper: #eef2f5;
  --paper-2: #e1e8ee;
  --card: #ffffff;
  --ink: #13233a;
  --ink-2: #3b4d66;
  --ink-3: #7a8aa0;
  --rule: #c8d3de;
  --accent: #2f6fd6;
  --accent-soft: #dbe7fa;
  --good: #1f7a5a;
  --good-soft: #d4ece2;
  --warn: #b06a10;
  --warn-soft: #f5e4c8;
  --c1: #1d4f91;
  --c2: #b06a10;
  --c3: #1f7a5a;
  --chapter-bg: #13233a;
  --chapter-ink: #eef2f5;
  --shadow: 0 1px 0 rgba(19, 35, 58, 0.06), 0 18px 40px -24px rgba(19, 35, 58, 0.3);
  --f-display: var(--f-sans);
  --f-body: var(--f-sans);
  --display-style: normal;
  --claim-style: normal;
  color-scheme: light;
}
[data-tema="nordisk"][data-theme="dark"] {
  --paper: #0e1622;
  --paper-2: #16202e;
  --card: #142030;
  --ink: #e6edf5;
  --ink-2: #b4c2d3;
  --ink-3: #7d8ca0;
  --rule: #2a3a4f;
  --accent: #6ea2ff;
  --accent-soft: #1b2b47;
  --good: #6fcfa5;
  --good-soft: #16302a;
  --warn: #f0b25e;
  --warn-soft: #3a2c16;
  --c1: #9fbfff;
  --c2: #f0b25e;
  --c3: #6fcfa5;
  --chapter-bg: #070c14;
  --chapter-ink: #e6edf5;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 18px 40px -24px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}

/* ---------- Kontrast: vitt, svart och en stark röd ---------- */

[data-tema="kontrast"] {
  --paper: #ffffff;
  --paper-2: #f0f0f0;
  --card: #ffffff;
  --ink: #000000;
  --ink-2: #222222;
  --ink-3: #555555;
  --rule: #bdbdbd;
  --accent: #c7311b;
  --accent-soft: #fbe1dc;
  --good: #146c2e;
  --good-soft: #dcefe2;
  --warn: #8f5a00;
  --warn-soft: #f6e7c8;
  --c1: #0b4fbd;
  --c2: #8f5a00;
  --c3: #146c2e;
  --chapter-bg: #000000;
  --chapter-ink: #ffffff;
  --shadow: 0 0 0 1px #bdbdbd;
  --f-display: var(--f-sans);
  --f-body: var(--f-sans);
  --display-style: normal;
  --claim-style: normal;
  color-scheme: light;
}
[data-tema="kontrast"][data-theme="dark"] {
  --paper: #000000;
  --paper-2: #141414;
  --card: #0d0d0d;
  --ink: #ffffff;
  --ink-2: #e6e6e6;
  --ink-3: #b3b3b3;
  --rule: #4d4d4d;
  --accent: #ff6b52;
  --accent-soft: #3d1510;
  --good: #5fd17f;
  --good-soft: #10301b;
  --warn: #ffc04d;
  --warn-soft: #3b2a08;
  --c1: #7fb2ff;
  --c2: #ffc04d;
  --c3: #5fd17f;
  --chapter-bg: #1a1a1a;
  --chapter-ink: #ffffff;
  --shadow: 0 0 0 1px #4d4d4d;
  color-scheme: dark;
}

/* ---------- Samling: gråviolett och violett, bara för samlingssidan ---------- */

/* Reserverat för samlingssidan. Neutral bakgrund så att korten, som visas i
   sina egna teman, syns tydligt. Ett test hindrar presentationer från att
   använda det. */
[data-tema="samling"] {
  --paper: #ecebf1;
  --paper-2: #e0dee8;
  --card: #f7f6fa;
  --ink: #1c1828;
  --ink-2: #4a4560;
  --ink-3: #807a95;
  --rule: #cfcbdc;
  --accent: #6a3fa0;
  --accent-soft: #e6dcf3;
  --good: #2f6b4f;
  --good-soft: #d7e8dc;
  --warn: #9a5f0b;
  --warn-soft: #f3e3c4;
  --c1: #3b5ba9;
  --c2: #9a5f0b;
  --c3: #2f6b4f;
  --chapter-bg: #1c1828;
  --chapter-ink: #ecebf1;
  --shadow: 0 1px 0 rgba(28, 24, 40, 0.06), 0 18px 40px -24px rgba(28, 24, 40, 0.35);
  --f-display: var(--f-serif-display);
  --f-body: var(--f-sans);
  --display-style: normal;
  --claim-style: italic;
  color-scheme: light;
}
[data-tema="samling"][data-theme="dark"] {
  --paper: #15131c;
  --paper-2: #1f1c28;
  --card: #1d1a26;
  --ink: #ece9f4;
  --ink-2: #bdb7cf;
  --ink-3: #857f99;
  --rule: #34304a;
  --accent: #b693e6;
  --accent-soft: #2e2442;
  --good: #7cc49d;
  --good-soft: #1d3328;
  --warn: #e6a64a;
  --warn-soft: #3a2b14;
  --c1: #9db4f0;
  --c2: #e6a64a;
  --c3: #7cc49d;
  --chapter-bg: #0b0a10;
  --chapter-ink: #ece9f4;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 18px 40px -24px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}

/* ---------- Gemensamt: boma.nu-märket och tillbakalänken ---------- */

/* boma.nus emblem (samma som boma-favicon.svg i Plugga). Det visas som en
   mask i textens färg, så att det blir ljust på mörka sidor. */
.boma-mark {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}
.boma-mark__emblem {
  display: inline-block;
  width: 1.55em;
  height: 1.42em;
  background-color: currentColor;
  -webkit-mask: url("boma.svg") no-repeat center / contain;
  mask: url("boma.svg") no-repeat center / contain;
}

/* I presentationerna ligger länkarna till boma.nu och samlingssidan först i
   styrknapparna längst ner till höger, som är halvt genomskinliga. */
a.controls__btn {
  display: grid;
  place-items: center;
  text-decoration: none;
}
.controls__btn .boma-mark__emblem {
  width: 1.3rem;
  height: 1.2rem;
}
.controls__sep {
  width: 1px;
  height: 1.4rem;
  margin: 0 0.2rem;
  background: var(--rule);
}
:root[data-on-dark] .controls__sep {
  background: color-mix(in srgb, var(--chapter-ink) 25%, transparent);
}

/* Länkar i läs mer-rutan, till exempel till andra presentationer och verktyg. */
.more-dialog__body a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.more-dialog__body a:hover {
  text-decoration-thickness: 2px;
}

/* Bilder i läs mer-rutan, till exempel valvets diagram. Vit botten eftersom
   diagrammen är ritade på vitt. */
.more-figure {
  margin: 1.2rem 0 0;
}
.more-figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  background: #ffffff;
}
.more-figure figcaption {
  margin-top: 0.4rem;
  font-size: 0.85em;
  color: var(--ink-3);
}

/* Beställda illustrationer: samma lugna bildyta i alla teman. */
.hero--illustrated .hero__inner,
.beat .illustration-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  max-width: 74rem;
}
.hero--illustrated .hero__title {
  font-size: clamp(3rem, 5.4vw, 6rem);
  line-height: 1;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.hero--illustrated .hero__title--long {
  font-size: clamp(2.5rem, 4.3vw, 5rem);
}
.hero--illustrated .hero__dek {
  font-size: clamp(1.35rem, 2.15vw, 2rem);
  margin-top: 1.5rem;
}
.hero--illustrated .hero__cue {
  margin-top: 1.5rem;
}
.illustration {
  min-width: 0;
  margin: 0;
}
.illustration img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.illustration figcaption {
  margin-top: 0.5rem;
  font-family: var(--f-ui);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--ink-3);
}
.illustration-layout__text {
  min-width: 0;
}
@media (max-width: 900px) {
  .hero--illustrated .hero__inner,
  .beat .illustration-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .illustration {
    width: min(100%, 36rem);
    justify-self: center;
  }
}