/* Generated by site/build.ts: the palette from packages/ui/src/tokens.ts, then site/site.css. */
:root {
  --night: #201A4F;
  --night-2: #2B2466;
  --night-3: #3A3180;
  --backdrop: #15113A;
  --cream: #FFF4DF;
  --cream-dim: #D9CFC0;
  --cream-mute: #9E97B8;
  --ink: #201A4F;
  --lime: #C8F135;
  --tangerine: #FF9F1C;
  --sunshine: #FFE45E;
  --pink: #FF5E7A;
  --sky: #4CC9F0;
  --deep-orange: #C2410C;
  --deep-pink: #C2185B;
  --deep-teal: #14699A;
  --grape: #5B3FD6;
  --deep-lime: #3F7A00;
}

/* The public pages (/, /privacy, /terms, /health-data, /delete-account): the night palette and Nunito
   for display, the system font for reading. pages.ts puts the palette in front of it in public/site.css. */

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/nunito-latin-800-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/nunito-latin-900-normal.woff2') format('woff2');
}

/* The palette comes first in the served file: pages.ts writes it from packages/ui/src/tokens.ts as
   --night, --night-2, --cream-dim and so on. Only the non-colour values live here. */
:root {
  color-scheme: dark;
  --display: 'Nunito', ui-rounded, 'SF Pro Rounded', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --gutter: 18px;
  --r-card: 28px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--night);
  color: var(--cream-dim);
  font: 16px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

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

a:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
  border-radius: 4px;
}

strong {
  color: var(--cream);
  font-weight: 700;
}

.wrap {
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Header on the reading pages: the mark and the wordmark, home. */
.top {
  padding-block: 18px 6px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cream);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.035em;
}

.brand img {
  width: 34px;
  height: 34px;
}

/* Reading pages. */
.doc {
  flex: 1;
  padding-block: 20px 48px;
}

.doc h1 {
  margin: 0 0 18px;
  color: var(--cream);
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(30px, 8vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.doc h2 {
  margin: 2em 0 0.4em;
  color: var(--cream);
  font-family: var(--display);
  font-weight: 900;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.doc p,
.doc ul {
  margin: 0 0 1em;
}

.doc ul {
  padding-left: 1.25em;
}

.doc li + li {
  margin-top: 0.4em;
}

.draft {
  margin: 0 0 24px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--pink);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.draft strong {
  color: var(--ink);
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: 0.08em;
}

/* Landing. */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: 56px 48px;
}

.hero .mark {
  width: 168px;
  height: 168px;
}

.wordmark {
  margin: 18px 0 0;
  color: var(--cream);
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(44px, 14vw, 64px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.tagline {
  margin: 14px 0 0;
  color: var(--cream);
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(22px, 6vw, 28px);
  line-height: 1.25;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.badge {
  display: grid;
  min-width: 168px;
  padding: 10px 20px;
  border-radius: 14px;
  background: var(--cream);
  color: var(--ink);
  text-align: left;
  line-height: 1.2;
}

.badge small {
  font-size: 12px;
  font-weight: 600;
}

.badge b {
  font-family: var(--display);
  font-weight: 900;
  font-size: 19px;
}

.badges + .note {
  margin: 10px 0 0;
  color: var(--cream-mute);
  font-size: 14px;
}

.placeholder {
  width: 100%;
  max-width: 30rem;
  margin: 40px 0 0;
  padding: 18px 20px;
  border: 2px dashed var(--night-3);
  border-radius: var(--r-card);
  color: var(--cream-mute);
}

.placeholder p {
  margin: 0;
}

.placeholder .label {
  margin-bottom: 6px;
  font-family: var(--display);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.disclaimer {
  max-width: 30rem;
  margin: 40px 0 0;
  color: var(--cream-mute);
  font-size: 14px;
  line-height: 1.5;
}

/* Footer on every page. */
.foot {
  padding-block: 22px 32px;
  border-top: 1px solid var(--night-2);
  color: var(--cream-mute);
  font-size: 14px;
}

.foot ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.foot a {
  color: var(--cream-dim);
  text-decoration-color: var(--night-3);
}

.foot p {
  margin: 0;
}