/* The ppong.be home page (placeholder). Layout only: every colour, size and font comes from
   tokens.css / ppong.css (the brand kit, see brand/). */

/* The kit's ppong.css switches logos only on an explicit data-theme="dark"; tokens.css also
   follows the system theme when no data-theme is set. Let the logos follow it too. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .pp-logo--light { display: none; }
  :root:not([data-theme]) .pp-logo--dark { display: inline-block; }
}

html, body { height: 100%; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 0 var(--space-4);
  box-sizing: border-box;
}

.home {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-16) 0 var(--space-8);
}

/* The lockup's viewBox already includes clear space of about one ball height. */
.home__logo { margin: 0 0 var(--space-8); line-height: 0; }
.home__logo .pp-logo { width: min(400px, 100%); height: auto; }

.home__slogan { margin: 0; max-width: 32em; }
.home__slogan + .home__slogan { margin-top: var(--space-2); }

.home__soon { margin: var(--space-8) 0 0; }

.home__foot {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6) 0 var(--space-8);
}