/* Rosé Pine: Dawn i ljust läge, Main i mörkt. */
:root {
  --base: #faf4ed;
  --surface: #fffaf3;
  --overlay: #f2e9e1;
  --border: #dfdad9;
  --muted: #797593;
  --text: #575279;
  --love: #b4637a;
  --gold: #b3741f;
  --rose: #d7827e;
  --pine: #286983;
  --iris: #907aa9;
}

@media (prefers-color-scheme: dark) {
  :root {
    --base: #191724;
    --surface: #1f1d2e;
    --overlay: #26233a;
    --border: #403d52;
    --muted: #908caa;
    --text: #e0def4;
    --love: #eb6f92;
    --gold: #f6c177;
    --rose: #ebbcba;
    --pine: #9ccfd8;
    --iris: #c4a7e7;
  }
}

*, *::before, *::after { box-sizing: border-box; }

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

/* Flex-kolumn med flexibelt innehåll trycker sidfoten till botten på korta sidor. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding: 0 1rem;
  background: var(--base);
  color: var(--text);
  font: 1.0625rem/1.7 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

#preamble, #content, #postamble {
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
}

#content { flex: 1; padding: 2rem 0 3rem; }

#preamble { padding-top: 1.5rem; }
#preamble a { color: var(--muted); font-size: .95rem; text-decoration: none; }
#preamble a:hover { color: var(--love); }

#postamble {
  padding: 1rem 0 1.5rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .9rem;
}
#postamble p { margin: 0; }

h1, h2, h3, h4 { color: var(--iris); line-height: 1.25; }
h1.title { margin: 0 0 1.5rem; color: var(--love); font-size: 2rem; text-align: left; }
.description { margin: -1rem 0 2rem; color: var(--muted); font-size: 1.1rem; }
.tags { margin: -1rem 0 2rem; font-size: .9rem; }
.description + .tags { margin-top: -1.5rem; }
.tags a { margin-right: .5rem; color: var(--muted); }
.tags a::before { content: "#"; }
.tags a:hover { color: var(--love); }
h2 { margin-top: 2.5rem; }
h3 { margin-top: 2rem; color: var(--rose); }

/* Org lägger brödtext i .outline-text-N; text utan rubrik ligger direkt i #content. */
#content > :not(h1, h2, h3, h4, h5, h6, .description, .tags, [class^="outline-"]),
[class^="outline-text-"] { margin-left: 1em; }

a { color: var(--pine); text-underline-offset: .15em; }
a:hover { color: var(--love); }

img { max-width: 100%; height: auto; }

blockquote {
  margin: 1.5rem 0;
  padding: .25rem 1rem;
  border-left: 3px solid var(--rose);
  background: var(--surface);
}

code, pre { font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; font-size: .9em; }
code { padding: .1em .3em; border-radius: 4px; background: var(--overlay); color: var(--love); }
pre {
  overflow-x: auto;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  line-height: 1.5;
}
pre code { padding: 0; background: none; color: inherit; }

/* Breda tabeller scrollar i stället för att spräcka sidan på mobilen. */
table { display: block; overflow-x: auto; border-collapse: collapse; }
th, td { padding: .4rem .75rem; border: 1px solid var(--border); text-align: left; }
th { background: var(--overlay); color: var(--iris); }

hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }