// Coffey Labs surfaces: the blueprint grid behind the page, the logo and
// wordmark in the navigation, mono for labels and numbers.

// The faint 32px grid with a glow where the eye starts, behind the columns
body {
  background-color: var(--color-bg-primary);
  background-image:
    radial-gradient(
      ellipse 60rem 40rem at 20% -10%,
      var(--cl-glow),
      transparent 60%
    ),
    linear-gradient(var(--cl-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--cl-grid-line) 1px, transparent 1px);
  background-size:
    100% 100%,
    32px 32px,
    32px 32px;
  background-attachment: fixed;
}

.ui,
.columns-area__panels {
  background: transparent;
}

::selection {
  background: var(--color-bg-brand-base);
  color: var(--color-text-on-brand-base);
}

// LINUXexpert mark and mono wordmark in place of the Mastodon wordmark
.column-link--logo {
  display: flex;
  align-items: center;
  gap: 10px;

  .logo--wordmark {
    display: none;
  }

  &::before {
    content: '';
    flex: none;
    width: 32px;
    height: 32px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20512%20512%27%3E%3Crect%20width%3D%27512%27%20height%3D%27512%27%20rx%3D%27104%27%20fill%3D%27%2314171D%27%2F%3E%3Crect%20x%3D%2710%27%20y%3D%2710%27%20width%3D%27492%27%20height%3D%27492%27%20rx%3D%2796%27%20fill%3D%27none%27%20stroke%3D%27%234FA7FF%27%20stroke-opacity%3D%270.18%27%20stroke-width%3D%274%27%2F%3E%3Cpolyline%20points%3D%27172%2C150%20284%2C256%20172%2C362%27%20fill%3D%27none%27%20stroke%3D%27%234FA7FF%27%20stroke-width%3D%2742%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3Crect%20x%3D%27322%27%20y%3D%27308%27%20width%3D%2792%27%20height%3D%2748%27%20rx%3D%278%27%20fill%3D%27%234FA7FF%27%2F%3E%3C%2Fsvg%3E")
      center / contain no-repeat;
  }

  &::after {
    content: 'LINUXexpert';
    font-family: var(--font-monospace);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
  }
}

// Display face for headings and names
.column-header__title,
.column-title h1,
.column-title h2,
.account__header__tabs__name h1,
.status__display-name strong,
.display-name__html {
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
}

.column-header__title {
  font-weight: 700;
}

// Mono for timestamps, counts and small labels
.status__relative-time,
.icon-button__counter,
.account__header__extra__links a,
.trends__item__current,
.notification-group__main__header__label,
.dismissable-banner__message,
.column-subheading {
  font-family: var(--font-monospace);
  font-size: 0.86em;
}

.column-subheading {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
}

// Hashtags and mentions read as code, like links on coffeylabs.org
.hashtag-bar a,
.status__content a.hashtag {
  font-family: var(--font-monospace);
  font-size: 0.92em;
}

// Cards get the coffeylabs.org border and soft shadow
.status-card,
.dropdown-menu,
.search__popout,
.modal-root__modal {
  border-color: var(--color-border-primary);
  box-shadow: var(--dropdown-shadow);
}