/* Static pages of socialrobin.app. All values come from tokens.css. */

@font-face { font-family: "Gabarito"; font-weight: 700 800; font-display: swap; src: url("fonts/gabarito-latin.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap; src: url("fonts/atkinson-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap; src: url("fonts/atkinson-700-latin.woff2") format("woff2"); }

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-line);
}

.page {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) var(--space-12);
  flex: 1;
}

.logo { display: block; width: 168px; height: auto; margin-bottom: var(--space-12); }
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .logo-light { display: none; }
  .logo-dark { display: block; }
}

h1, h2 { font-family: var(--font-display); margin: 0 0 var(--space-4); }
h1 { font-size: var(--display-xl-size); line-height: var(--display-xl-line); font-weight: var(--display-xl-weight); letter-spacing: -0.01em; }
h2 { font-size: var(--heading-size); line-height: var(--heading-line); font-weight: var(--heading-weight); margin-top: var(--space-8); }
.page-legal h1 { font-size: var(--display-size); line-height: var(--display-line); font-weight: var(--display-weight); }

p { margin: 0 0 var(--space-4); }
.lead { margin-bottom: var(--space-8); }
.muted { color: var(--ink-muted); font-size: var(--body-sm-size); line-height: var(--body-sm-line); }

.card {
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}

.steps { list-style: none; margin: 0 0 var(--space-8); padding: 0; }
.steps li { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.steps li:last-child { border-bottom: 0; }
.dot { flex: none; width: 12px; height: 12px; margin-top: 7px; border-radius: var(--radius-pill); background: var(--robin); }

a { color: var(--robin-strong); }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

.footer {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-8);
  border-top: 1px solid var(--border);
  color: var(--ink-muted);
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
}
.footer nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); margin-bottom: var(--space-2); }
.footer a { display: inline-flex; align-items: center; min-height: var(--space-12); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}