/* The Seed site: the privacy policy and support pages the app links to.

   Drawn the way the app draws a page (apps/mobile/theme): the system face for
   what is read, Fraunces for the page's title and its group headings, the
   headings in the accent, and the app's own colours in each appearance. The
   three Fraunces cuts are the app's own files, served from here, so nothing
   is fetched from anyone else. */

@font-face {
  font-family: 'Fraunces Title';
  src: url('/fonts/Fraunces-Title.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces Heading';
  src: url('/fonts/Fraunces-Heading.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces Text';
  src: url('/fonts/Fraunces-Text.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

/* lightPalette in apps/mobile/theme/tokens.ts */
:root {
  --background: #ffffff;
  --text-primary: #222222;
  --text-secondary: #474747;
  --text-muted: #5e5e5e;
  --border: rgba(0, 0, 0, 0.09);
  --accent: #234c43;
  --accent-muted: rgba(35, 76, 67, 0.12);
  --serif-fallback: Georgia, 'Times New Roman', serif;
  --system:
    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
  color-scheme: light dark;
}

/* darkPalette */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #1a1a1a;
    --text-primary: #efefef;
    --text-secondary: #cacaca;
    --text-muted: #aeaeae;
    --border: rgba(255, 255, 255, 0.1);
    --accent: #a8ccbe;
    --accent-muted: rgba(168, 204, 190, 0.16);
  }
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--background);
  color: var(--text-primary);
  font: 17px/1.5 var(--system);
  -webkit-font-smoothing: antialiased;
}

header,
main,
footer {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
}

header {
  padding-top: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  text-decoration: none;
}

.brand svg {
  display: block;
  flex: none;
}

/* The name beside the mark: the Title cut, as the app's welcome sets it. */
.wordmark {
  font-family: 'Fraunces Title', var(--serif-fallback);
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* A screen's name: the Title cut, as `Text variant="title"` sets it. */
h1 {
  font-family: 'Fraunces Title', var(--serif-fallback);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.25;
  margin: 40px 0 6px;
}

/* The line under it, in the Text cut, as the date line under Today's name. */
.meta {
  font-family: 'Fraunces Text', var(--serif-fallback);
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 0 24px;
}

/* A group heading: the Heading cut, in the accent (`SectionLabel`). */
h2 {
  font-family: 'Fraunces Heading', var(--serif-fallback);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  color: var(--accent);
  margin: 36px 0 8px;
}

h3 {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  margin: 24px 0 4px;
}

p,
ul {
  margin: 0 0 14px;
}

ul {
  padding-left: 20px;
}

li {
  margin-bottom: 8px;
}

li::marker {
  color: var(--text-muted);
}

strong {
  font-weight: 600;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.lead {
  font-size: 19px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.store-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  padding: 12px 20px;
  margin: 8px 0 10px;
  border-radius: 14px;
  background: var(--accent);
  color: var(--background);
  font-weight: 600;
  text-decoration: none;
}

.store-link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.download-note {
  color: var(--text-muted);
  font-size: 14px;
}

/* A row that leads somewhere, as Settings draws one. */
.links {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}

.links li {
  margin: 0;
  border-bottom: 1px solid var(--border);
}

.links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 52px;
  color: var(--text-primary);
  text-decoration: none;
}

.links a::after {
  content: '›';
  color: var(--text-muted);
  font-size: 22px;
}

.contact {
  margin: 24px 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--accent-muted);
}

.contact p {
  margin: 0;
}

/* The rule lines up with the text, as the rows' rules do. */
footer {
  width: calc(100% - 40px);
  max-width: 600px;
  margin: 56px auto 0;
  padding: 20px 0 40px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 15px;
}

footer a {
  color: var(--text-muted);
  margin-right: 18px;
}