/* arevli.com's one stylesheet (docs/specs/2026-10-28-website-design.md §5.2). Every colour is a
   role from tokens.css, the app's own copy, whose media query gives the dark theme; the type scale
   is the app's (src/theme/tokens.ts). site/test/site.test.mjs holds both to the app's files. */

@font-face {
  font-family: "Fraunces-Opsz30-Regular";
  src: url("/fonts/Fraunces-Opsz30-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Fraunces-Opsz24-Regular";
  src: url("/fonts/Fraunces-Opsz24-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Fraunces-Opsz20-Regular";
  src: url("/fonts/Fraunces-Opsz20-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Fraunces-Opsz18-Regular";
  src: url("/fonts/Fraunces-Opsz18-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Inter-Opsz14-Regular";
  src: url("/fonts/Inter-Opsz14-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Inter-Opsz14-Medium";
  src: url("/fonts/Inter-Opsz14-Medium.ttf") format("truetype");
  font-display: swap;
}

/* The app's text roles, in px as the tokens give them. color-scheme lets the browser's own chrome
   (scrollbars, the overscroll area) follow tokens.css's dark theme. */
:root {
  color-scheme: light dark;

  --title-page-size: 30px;
  --title-page-line-height: 37px;
  --title-page-tracking: 0px;
  --title-page-family: "Fraunces-Opsz30-Regular";

  --title-section-size: 24px;
  --title-section-line-height: 32px;
  --title-section-tracking: 0px;
  --title-section-family: "Fraunces-Opsz24-Regular";

  --heading-sm-size: 18px;
  --heading-sm-line-height: 28px;
  --heading-sm-tracking: 0px;
  --heading-sm-family: "Fraunces-Opsz18-Regular";

  --code-invite-size: 24px;
  --code-invite-line-height: 32px;
  --code-invite-tracking: 7.2px;
  --code-invite-family: "Fraunces-Opsz24-Regular";

  --wordmark-size: 20px;
  --wordmark-line-height: 28px;
  --wordmark-tracking: -0.5px;
  --wordmark-family: "Fraunces-Opsz20-Regular";

  --body-size: 16px;
  --body-line-height: 24px;
  --body-tracking: 0px;
  --body-family: "Inter-Opsz14-Regular";

  --body-sm-size: 14px;
  --body-sm-line-height: 20px;
  --body-sm-tracking: 0px;
  --body-sm-family: "Inter-Opsz14-Regular";

  --label-size: 14px;
  --label-line-height: 20px;
  --label-tracking: 0px;
  --label-family: "Inter-Opsz14-Medium";

  --link-size: 14px;
  --link-line-height: 20px;
  --link-tracking: 0px;
  --link-family: "Inter-Opsz14-Medium";

  --caption-size: 12px;
  --caption-line-height: 16px;
  --caption-tracking: 0px;
  --caption-family: "Inter-Opsz14-Regular";
}

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

/* The hidden attribute wins over any display rule below, so the join page never shows both views. */
[hidden] {
  display: none !important;
}

/* The faces are static instances, one weight and no italic each: never let the browser fake one. */
body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--body-family), system-ui, sans-serif;
  font-size: var(--body-size);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-tracking);
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-wrap: break-word;
}

/* One column: 16px gutters on a phone, a readable measure on a wide screen. */
.site-header,
main,
.site-footer {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 16px;
}

.site-header {
  padding-top: 24px;
  padding-bottom: 8px;
}

.site-header a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: hsl(var(--foreground));
  text-decoration: none;
}

.site-header img {
  width: 32px;
  height: 32px;
}

.wordmark {
  font-family: var(--wordmark-family), Georgia, serif;
  font-size: var(--wordmark-size);
  line-height: var(--wordmark-line-height);
  letter-spacing: var(--wordmark-tracking);
}

main {
  padding-top: 16px;
  padding-bottom: 32px;
}

h1,
h2 {
  font-weight: normal;
  margin: 0;
}

h1 {
  font-family: var(--title-page-family), Georgia, serif;
  font-size: var(--title-page-size);
  line-height: var(--title-page-line-height);
  letter-spacing: var(--title-page-tracking);
  margin-bottom: 16px;
}

h2 {
  font-family: var(--heading-sm-family), Georgia, serif;
  font-size: var(--heading-sm-size);
  line-height: var(--heading-sm-line-height);
  letter-spacing: var(--heading-sm-tracking);
  margin-top: 32px;
  margin-bottom: 8px;
}

p,
ul,
ol {
  margin: 0 0 16px;
}

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

li + li {
  margin-top: 8px;
}

strong {
  font-family: var(--label-family), system-ui, sans-serif;
  font-weight: normal;
}

/* A link inside a sentence takes the sentence's type; a standalone link, the actions spec's Link
   kind, takes the link role. */
a {
  color: hsl(var(--primary));
  text-decoration: underline;
}

.link {
  font-family: var(--link-family), system-ui, sans-serif;
  font-size: var(--link-size);
  line-height: var(--link-line-height);
  letter-spacing: var(--link-tracking);
}

:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* A card: muted-foreground on card, as the app's Support screen draws its sections. */
.card,
.get-arevli {
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  padding: 16px;
  margin: 0 0 16px;
}

.get-arevli p {
  margin: 0;
}

/* The join page's one filled button. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 24px;
  border-radius: 8px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  text-decoration: none;
  font-family: var(--label-family), system-ui, sans-serif;
  font-size: var(--label-size);
  line-height: var(--label-line-height);
  letter-spacing: var(--label-tracking);
}

.code-invite {
  font-family: var(--code-invite-family), Georgia, serif;
  font-size: var(--code-invite-size);
  line-height: var(--code-invite-line-height);
  letter-spacing: var(--code-invite-tracking);
}

.caption,
.updated,
.site-footer {
  font-family: var(--caption-family), system-ui, sans-serif;
  font-size: var(--caption-size);
  line-height: var(--caption-line-height);
  letter-spacing: var(--caption-tracking);
  color: hsl(var(--muted-foreground));
}

.site-footer {
  padding-top: 16px;
  padding-bottom: 32px;
  text-align: center;
}

.site-footer p {
  margin: 0 0 8px;
}