@layer components {

  .app-footer {
    width: 100%;
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    margin-top: auto;
  }

  .app-footer__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding: var(--space-4) var(--container-pad-x);
    gap: var(--space-4);
  }

  .app-footer__copy {
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
  }

  .app-footer__credit {
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
  }

  .app-footer__brand {
    font-weight: var(--font-medium);
    color: var(--color-ink-dark);
  }

}