/*
 * sty.css — minimal standalone stylesheet for a simple page (e.g. a file
 * listing) served from *another* server, styled to look like the Online
 * Lehrbuch (Starlight + Atkinson Hyperlegible).
 *
 * Self-contained: no build step, no Starlight. Font files and @font-face are
 * pulled from the deployed book by absolute URL, so this works cross-origin.
 * Just link it:  <link rel="stylesheet" href="https://web-development.github.io/sty.css">
 */

/* Atkinson Hyperlegible @font-face, inlined from
   public/fonts/atkinson/atkinson-faces.css (that file gets a hashed name in
   production, so it can't be @import-ed by path). The woff2 files live in
   public/ and keep their names, so the absolute URLs resolve cross-origin. */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('https://web-development.ct.fh-salzburg.ac.at/fonts/atkinson/AtkinsonHyperlegibleNext-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('https://web-development.ct.fh-salzburg.ac.at/fonts/atkinson/AtkinsonHyperlegibleNext-RegularItalic.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('https://web-development.ct.fh-salzburg.ac.at/fonts/atkinson/AtkinsonHyperlegibleNext-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('https://web-development.ct.fh-salzburg.ac.at/fonts/atkinson/AtkinsonHyperlegibleNext-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: italic; font-weight: 700; font-display: swap;
  src: url('https://web-development.ct.fh-salzburg.ac.at/fonts/atkinson/AtkinsonHyperlegibleNext-BoldItalic.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('https://web-development.ct.fh-salzburg.ac.at/fonts/atkinson/AtkinsonHyperlegibleMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('https://web-development.ct.fh-salzburg.ac.at/fonts/atkinson/AtkinsonHyperlegibleMono-RegularItalic.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('https://web-development.ct.fh-salzburg.ac.at/fonts/atkinson/AtkinsonHyperlegibleMono-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  font-style: italic; font-weight: 700; font-display: swap;
  src: url('https://web-development.ct.fh-salzburg.ac.at/fonts/atkinson/AtkinsonHyperlegibleMono-BoldItalic.woff2') format('woff2');
}

:root {
  color-scheme: light dark;
  --font: 'Atkinson Hyperlegible Next', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Atkinson Hyperlegible Mono', ui-monospace, SFMono-Regular, monospace;

  --bg: #ffffff;
  --text: #17181c;
  --text-dim: #565761;
  --accent: #2b5cc4;
  --accent-hover: #1d47a3;
  --border: #e4e4e8;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17181c;
    --text: #f6f6f9;
    --text-dim: #a0a1ab;
    --accent: #8db1f4;
    --accent-hover: #b3ccf9;
    --border: #2a2b33;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 3rem 1.5rem;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* center the content in a readable column */
body > * {
  max-width: 45rem;
  margin-inline: auto;
}

h1 {
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.2;
  margin: 0 0 1.5rem;
}

h2 {
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 2rem 0 1rem;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--accent-hover);
}

ul,
ol {
  padding-left: 1.25rem;
}

li {
  margin: 0.35rem 0;
}

code,
pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

pre {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  overflow-x: auto;
}

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

small,
.dim {
  color: var(--text-dim);
}