@import url("./tokens.css");
@import url("./reset.css");

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
}

a { color: var(--color-primary-pressed); }

.page {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-xxl);
}

.siteHeader {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  color: var(--color-text);
  text-decoration: none;
}

.headerIcon {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  border-radius: var(--radius-md);
}

h1 {
  font-size: var(--font-size-display);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-sm);
}

h2 {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
  margin: var(--space-xl) 0 var(--space-sm);
}

p, ul { margin-bottom: var(--space-md); }
ul { padding-left: var(--space-lg); }
li { margin-bottom: var(--space-xs); }

.lede {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
}

.meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
  margin: var(--space-lg) 0;
}

.card h2 { margin-top: 0; }

/* Landing */
.hero {
  text-align: center;
  padding: var(--space-xxl) 0 var(--space-xl);
}

.heroIcon {
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: var(--radius-xl);
  margin: 0 auto var(--space-lg);
}

.badge {
  display: inline-block;
  background: var(--color-primary-soft);
  color: var(--color-on-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-full);
  padding: var(--space-xs) var(--space-md);
}

.features {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .features { grid-template-columns: repeat(3, 1fr); }
}

.feature {
  background: var(--color-surface-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.feature h2 {
  font-size: var(--font-size-lg);
  margin-top: 0;
}

.feature p { margin-bottom: 0; color: var(--color-text-secondary); }

.siteFooter {
  margin-top: var(--space-xxl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.legal { flex-basis: 100%; }