/*
 * The lander's whole style. The colours are the app's own tokens from
 * apps/desktop/src/index.css, copied rather than imported so the page has no
 * build: the dark theme is the default here, the light one follows the
 * system. Every pair of text and ground used below clears 4.5:1 in both.
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/InterVariable-4.1.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --color-canvas: oklch(0.168 0.005 75);
  --color-line: oklch(0.295 0.007 75);
  --color-fg: oklch(0.925 0.005 85);
  --color-fg-muted: oklch(0.82 0.008 85);
  --color-fg-subtle: oklch(0.708 0.011 80);
  --color-accent: oklch(0.72 0.12 264);
  --color-accent-hover: oklch(0.77 0.11 264);
  --color-accent-fg: oklch(0.17 0.01 264);
  --font-sans:
    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --color-canvas: oklch(0.973 0.004 85);
    --color-line: oklch(0.898 0.006 82);
    --color-fg: oklch(0.255 0.012 75);
    --color-fg-muted: oklch(0.42 0.013 75);
    --color-fg-subtle: oklch(0.505 0.013 75);
    --color-accent: oklch(0.52 0.128 264);
    --color-accent-hover: oklch(0.47 0.128 264);
    --color-accent-fg: oklch(0.99 0.002 85);
  }
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-canvas);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

/*
 * One column, centred, wide enough to read and no wider. The gutter is taken
 * from the width rather than padded inside it, so the footer's rule lines up
 * with the text.
 */
body > header,
body > main,
body > footer {
  width: min(100% - 2 * clamp(1.25rem, 5vw, 2rem), 36rem);
  margin-inline: auto;
}

body > header {
  padding-top: clamp(3rem, 12vh, 7rem);
}

body > main {
  flex: 1;
  padding-bottom: 4rem;
}

body > footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem 2rem;
  border-top: 1px solid var(--color-line);
  color: var(--color-fg-subtle);
  font-size: 0.875rem;
}

body > footer p {
  margin: 0;
}

/*
 * The mark is drawn from mark.svg as a mask, so it takes the text colour of
 * whichever theme is showing; an img would keep the colour baked into the file.
 */
.mark {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  margin: -0.75rem 0 0.5rem;
  background-color: var(--color-fg);
  -webkit-mask: url("/mark.svg") center / contain no-repeat;
  mask: url("/mark.svg") center / contain no-repeat;
}

h1 {
  margin: 0;
  font-size: clamp(2rem, 7vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.lede {
  margin: 1rem 0 0;
  max-width: 34rem;
  color: var(--color-fg-muted);
  font-size: 1.1875rem;
  line-height: 1.55;
}

.points {
  margin-top: 3rem;
}

.points article {
  padding-block: 1.25rem;
  border-top: 1px solid var(--color-line);
}

.points article:last-child {
  border-bottom: 1px solid var(--color-line);
}

h2 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
}

.points p {
  margin: 0.25rem 0 0;
  color: var(--color-fg-muted);
}

.sign-in {
  margin-top: 3rem;
}

.button {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  border-radius: 0.5rem;
  background: var(--color-accent);
  color: var(--color-accent-fg);
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  transition: background-color 120ms ease;
}

.button:hover {
  background: var(--color-accent-hover);
}

.button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.note {
  margin: 0.875rem 0 0;
  color: var(--color-fg-subtle);
  font-size: 0.9375rem;
}

a {
  color: var(--color-accent);
  text-underline-offset: 0.2em;
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
}