/* ──────────────────────────────────────────────────────────────────────────
   The legal pages.

   These are plain HTML in `public/`, not part of the app bundle, and that is
   the point: Paddle's review, a search engine and a customer following a link
   from an invoice all have to reach them with no JavaScript, no sign-in and no
   IndexedDB. So this sheet cannot `@import` the app's tokens — it carries its
   own copy of the primitive scale.

   That copy is deliberate duplication, and the rule that comes with it: these
   nine values are the same nine in `src/styles/theme.css`. Change them there
   and change them here. Nothing else is repeated — every rule below reads a
   semantic token, exactly as component CSS does.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --mw-0: #2a2927;
  --mw-25: #726f6a;
  --mw-50: #fcfbf8;
  --mw-100: #f5f2eb;
  --mw-150: #e6ddcc;
  --mw-400: #418170;

  --surface: var(--mw-100);
  --surface-raised: var(--mw-50);
  --line: var(--mw-150);
  --ink: var(--mw-0);
  --ink-muted: var(--mw-25);
  --accent-brand: var(--mw-400);
  --accent-strong: color-mix(in srgb, var(--mw-400) 82%, var(--mw-0));

  --font-ui: 'Chivo Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --font-body: 'Sentient', Georgia, 'Times New Roman', serif;

  --fs-label: 11px;
  --ls-label: 0.04em;
  --radius-sm: 4px;
  --radius-pill: 999px;
}

:root.dark {
  --mw-0: #f0ede5;
  --mw-25: #a29d94;
  --mw-50: #232220;
  --mw-100: #1b1a18;
  --mw-150: #35322c;
  --mw-400: #6cae99;

  --accent-strong: color-mix(in srgb, var(--mw-400) 78%, var(--mw-0));
}

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

@font-face {
  font-family: 'Sentient';
  src: url('/fonts/sentient/Sentient-VariableItalic.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Chivo Mono';
  src: url('/fonts/chivo-mono/ChivoMono-Variable-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
}

.legal-shell {
  /* A measure, not a width: legal text is read, and 68 characters is where a
     line stops needing the eye to travel back for the next one. */
  max-width: 68ch;
  margin: 0 auto;
  padding: 48px 24px 96px;
}

/* ── Head ─────────────────────────────────────────────────────────────── */

.legal-back {
  display: inline-block;
  margin-bottom: 40px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-muted);
  text-decoration: none;
}

.legal-back:hover {
  color: var(--ink);
}

.legal-eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--ink-muted);
}

h1 {
  margin: 0 0 8px;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.2;
}

.legal-updated {
  margin: 0 0 40px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-muted);
}

/* ── Body ─────────────────────────────────────────────────────────────── */

h2 {
  margin: 44px 0 12px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
}

h3 {
  margin: 28px 0 8px;
  font-size: 18px;
  font-weight: 600;
}

p,
li {
  margin: 0 0 16px;
}

ul,
ol {
  padding-left: 22px;
}

li {
  margin-bottom: 8px;
}

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

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

strong {
  font-weight: 600;
}

hr {
  height: 0;
  margin: 44px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/* A definition-style row: the term in the chrome face, the answer in prose. */
.legal-table {
  width: 100%;
  margin: 0 0 16px;
  border-collapse: collapse;
  font-size: 16px;
  text-align: left;
}

.legal-table th,
.legal-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.legal-table th {
  width: 34%;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
}

.legal-note {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font-size: 16px;
}

.legal-note :last-child {
  margin-bottom: 0;
}

/* Something Torbjørn has to fill in before this page is true. Loud on purpose:
   a placeholder that reads as ordinary text is a placeholder that ships. */
.fill-me {
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: #ffe066;
  color: #2a2927;
  font-family: var(--font-ui);
  font-size: 13px;
}

.legal-foot {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-muted);
}

.legal-foot a {
  margin-right: 18px;
  color: var(--ink-muted);
}

.legal-foot a:hover {
  color: var(--ink);
}

@media (max-width: 600px) {
  .legal-shell {
    padding: 32px 20px 72px;
  }

  h1 {
    font-size: 28px;
  }

  .legal-table th {
    width: 40%;
  }
}