/*
 * The legal documents' one stylesheet. Shared by privacy.html, terms.html and refund.html so the
 * three read as part of the same site without a second design.
 *
 * These pages are static HTML served straight out of `public/`, ahead of the SPA catch-all — they
 * have to be readable with JavaScript switched off, by crawlers and by the payment provider's
 * compliance review. So the tokens below are COPIED from `src/index.css` rather than imported: this
 * file is served on its own, with no build step and no Tailwind. Keep them in step after a theme
 * change, the same way the page keeps its own copy of the app's tokens in step.
 */
/*
 * The face itself, not just its name. These pages are served as plain files, so they never load the
 * app's bundle — naming "IBM Plex Mono" in `font-family` without declaring it renders every legal
 * page in the fallback for anyone who does not happen to have Plex installed. The two latin subsets
 * are copied out of `@fontsource/ibm-plex-mono` (~30 KB total, the same files the page's bundle uses)
 * and served from beside this stylesheet.
 */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2");
}

:root {
  --ink-0: #0a0a0a;
  --rule: #2e2e2e;
  --tx-1: #e8e8e6;
  --tx-2: #9a9a96;
  --tx-3: #5c5c58;
  --amber: #d9a21b;
  color-scheme: dark;
}

html {
  background: var(--ink-0);
  color: var(--tx-1);
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0 24px 96px;
}

/* One measure, centred. A legal document is read, not scanned, so the column stays narrow. */
.doc {
  max-width: 760px;
  margin: 0 auto;
}

/* The masthead: the mark's name and the way back, ruled off like the sheet's own sections. */
header {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

header a {
  color: var(--tx-2);
}

h1 {
  margin: 56px 0 8px;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

h2 {
  margin: 44px 0 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.updated {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--tx-3);
  text-transform: uppercase;
}

/* The one-line statement under a document's title, in the register the sheet's subtitles use. */
.lede {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--tx-2);
}

p,
li {
  font-size: 14px;
  line-height: 1.8;
  color: var(--tx-2);
}

li {
  margin-bottom: 8px;
}

ul {
  padding-left: 20px;
}

strong {
  font-weight: 600;
  color: var(--tx-1);
}

code {
  color: var(--tx-1);
  word-break: break-all;
}

a {
  color: var(--tx-1);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--rule);
}

a:hover {
  text-decoration-color: var(--tx-2);
}

/* A note the reader must not skim past — the sheet's one accent, spent sparingly here too. */
.note {
  margin-top: 40px;
  padding: 18px 20px;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--amber);
}

.note p {
  margin: 0;
}

footer {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--tx-3);
  text-transform: uppercase;
}

footer a {
  color: var(--tx-3);
  text-decoration-color: var(--rule);
}