/*
  The Cords site. One stylesheet, no build step, no framework.

  Space Grotesk, self-hosted: the latin subset of the variable weight axis,
  22 kB, served from this domain. Nothing is fetched from a font host, which
  is what lets the privacy page say no third party sees a visitor.
  SIL Open Font License; the text is next to the file in fonts/OFL.txt.

  The colours are copied from the app's Paper and Ink themes
  (src/renderer/src/styles/globals.css) rather than imported: the site sits
  outside the Electron build. Keep them in step by hand if the app's change.
*/

@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/text.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --paper: #faf9f7;
  --ink: #1c1b1a;
  --ink-2: #57534e;
  --ink-3: #8c877f;
  --line: #e6e2db;
  --accent: #0f766e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #161514;
    --ink: #f1efeb;
    --ink-2: #b9b3aa;
    --ink-3: #7d776e;
    --line: #2c2a27;
    --accent: #2dd4bf;
  }
}

body {
  margin: 0 auto;
  padding: 4rem 1.5rem 5rem;
  max-width: 34rem;

  background: var(--paper);
  color: var(--ink);
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

h1 {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 1.25rem;
}

h2 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 2.5rem 0 0.75rem;
}

h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-2);
  margin: 1.75rem 0 0.5rem;
}

p,
ul {
  margin: 0 0 1.125rem;
}

ul {
  padding-left: 1.125rem;
}

li {
  margin-bottom: 0.5rem;
}

a {
  color: var(--accent);
  text-underline-offset: 2px;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875em;
  color: var(--ink-2);
}

.lede,
.muted {
  color: var(--ink-2);
}

.muted {
  margin-top: -0.75rem;
  font-size: 0.9375rem;
  color: var(--ink-3);
}

.back {
  margin-bottom: 2.5rem;
  font-size: 0.9375rem;
}

.back a {
  color: var(--ink-3);
  text-decoration: none;
}

footer {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 0.9375rem;
}

footer a {
  color: var(--ink-3);
}