@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Fraunces:wght@500;600;700&display=swap");
@import url("/styles/tokens.css");
@import url("/components/button.css");
@import url("/components/input.css");
@import url("/components/card.css");
@import url("/components/badge.css");
@import url("/components/pills.css");
@import url("/components/status-panel.css");
@import url("/components/alert.css");

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-white);
  color: var(--text-primary);
  font-family: var(--font-ui);
}

.app {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-10) var(--page-padding) calc(var(--space-10) + var(--space-4));
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.nav__link {
  text-decoration: none;
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.logo__mark {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-2);
  background: var(--color-brand-900);
  color: var(--color-white);
  display: grid;
  place-items: center;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.18em;
}

.logo__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.logo__subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--space-8);
  align-items: center;
}

.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: var(--text-xs);
  color: var(--color-brand-500);
  margin: 0 0 var(--space-3);
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4);
}

.hero__copy {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
  margin: 0;
}

.hero__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.hero__narrative {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.section-title {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
}

.panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.pills.is-hidden {
  display: none;
}

.advanced-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-brand-700);
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
}

.advanced {
  display: none;
}

.advanced.is-open {
  display: block;
}

.helper {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.results {
  display: none;
  flex-direction: column;
  gap: var(--space-4);
}

.results.is-visible {
  display: flex;
}

.results__content {
  display: grid;
  gap: var(--space-3);
}

.results__text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
}

.results__code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  background: var(--color-gray-100);
  border-radius: var(--radius-2);
  padding: var(--space-4);
  font-size: var(--text-sm);
  white-space: pre-wrap;
}

.footer {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .app {
    padding-top: var(--space-7);
  }

  .header {
    flex-direction: column;
    align-items: flex-start;
  }
}