/* Public layout: forced dark theme (Work Sans, brand bg, teal accents) */

:root {
   color-scheme: dark;
   --color-bg: rgb(11 11 11);
   --color-bg-top: var(--brand-deep-pockets);
   --color-bg-middle: var(--brand-evergreen);
   --color-bg-bottom: var(--color-bg);
   --color-surface: rgb(255 255 255 / 10%);
   --color-text: #FFF;
   --color-text-muted: #BDB8BD;
   --color-line: rgb(255 255 255 / 10%);
   --color-faint-line: rgb(255 255 255 / 5%);
   --color-header-bg: transparent;
   --default-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
   font-family: var(--default-font);
   background: linear-gradient(to bottom right, var(--color-bg-top), var(--color-bg-middle), var(--color-bg-bottom));
   color: var(--color-text);
   line-height: 1.6;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
}

body > header,
body > article,
body > main,
body > footer {
   position: relative;
   z-index: 2;
}

body > header {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   height: 52px;
   padding: 0 1.5rem;
   /*border-bottom: 1px solid var(--color-faint-line);
   background: linear-gradient(
      to right,
      rgb(from var(--color-bg) r g b / 80%),
      rgb(from var(--brand-evergreen) r g b / 80%),
      rgb(from var(--color-bg) r g b / 80%));
   backdrop-filter: blur(8px);*/

   .logo-icon { width: 28px; height: 28px; }

   .logo-text {
      display: inline-block;
      width: 84px;
      height: 19px;
      background: var(--color-text);
      mask-image: url("/web/images/pacer.svg");
      mask-size: contain;
      mask-repeat: no-repeat;
   }
}

body > footer {
   margin-top: auto;
}

a {
   text-decoration: none;
   &:hover { text-decoration: underline; }
}

#logo-particles {
   --width: min(50vw, 50vh * var(--logo-particle-aspect));
   position: fixed;
   z-index: 3;
   pointer-events: none;
   bottom: calc(4.5rem - 100px);
   left: 50%;
   translate: -50% 0;
   width: calc(var(--width) + var(--logo-particle-spread) * 2);
   height: calc(var(--width) / var(--logo-particle-aspect) + var(--logo-particle-spread) * 2);
}