@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);

    --text-box-font-header: trim-both cap text;
    --product-name-text-transform: none;
  }

  :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(--color-highlight));
    }
  }

  .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;
    }
  }

  .app-footer {
    border-top: 0.25rem solid var(--color-link);
    background-color: var(--color-highlight);
    color: var(--color-ink-inverted);
  }
  
  /* comment */
}
:root {
--color-canvas: oklch(95.565% 0.01591 102.83);
--color-alert: oklch(47.29% 0.1003 62.57);
--color-negative: oklch(53% 0.21002 29.244);
--color-positive: oklch(45.81% 0.1157 151.71);
--color-ink: oklch(51.897% 0.04341 139.19);
--color-link: oklch(51.897% 0.04341 139.19);
--color-highlight: oklch(67.974% 0.10523 57.49);
}