@layer tenant {
  :root {
    --font-body: "GothamHTF", sans-serif;
    --font-header: "GothamHTF", sans-serif;
    --color-canvas: var(--color-white-rizzoma);
    --color-ink: var(--color-green-rizzoma);

  }

  :where(.font-header) {
    font-weight: bold;
  }

  body {
    font-family: var(--font-body);
    font-weight: 300;
  }

  h1,
  h2,
  h3 {
    font-weight: bold;

    header & {
      color: hsl(var(--secondary));
    }
  }

  .layout {
    grid:
      "announcement"  min-content
      "nav-bar"       min-content
      "main"          1fr
      "footer"        min-content / minmax(0, 1fr);
  }

  .btn {
    text-transform: uppercase;
  }

  .mobile-header {
    display: none;
  }

  .nav-bar__container {
    --nav-bar-top: 0;
    --nav-bar-bottom: auto;
    --nav-bar-background-color: var(--color-canvas);
    --nav-bar-color: var(--color-text);
  }

  .nav-bar-ginger__buttons {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    text-align: center;

    @media (width < 48rem) {
      display: none;
    }
  }
}