/* Gemensamma färger och typsnitt för hela kursmaterialet */
@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap");

:root {
  --cream: #fff8ef;
  --paper: #ffffff;
  --sand: #fdebd3;
  --peach: #ffd6b8;
  --sun: #ffc23d;
  --orange: #ff8a3d;
  --coral: #f2603f;
  --berry: #d94a6a;
  --plum: #6b2e4e;
  --leaf: #3e9b6b;
  --ink: #3a2418;
  --ink-soft: #7a5a48;
  --line: #f1d9c2;
  --code-bg: #2e1d14;
  --code-ink: #ffe9d2;

  --font-head: "Fredoka", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;

  --radius: 18px;
  --shadow: 0 10px 30px rgba(158, 72, 28, 0.12);
  --gradient: linear-gradient(135deg, var(--sun) 0%, var(--orange) 45%, var(--coral) 75%, var(--berry) 100%);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.2;
  color: var(--plum);
  margin: 0 0 0.5em;
}

a { color: var(--coral); font-weight: 700; }
a:hover { color: var(--berry); }

code, pre, kbd { font-family: var(--font-mono); }

:not(pre) > code {
  background: var(--sand);
  color: var(--plum);
  padding: 0.1em 0.4em;
  border-radius: 6px;
  font-size: 0.92em;
}

kbd {
  background: var(--paper);
  border: 1px solid var(--line);
  border-bottom-width: 3px;
  border-radius: 6px;
  padding: 0.05em 0.45em;
  font-size: 0.88em;
}