/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
  /* Typography ------------------------------------------------------------ */
  --font-primary: "Link Sans Product", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --title-size: 1.5rem;
  --title-weight: 600;

  --bio-size: 16px;
  --bio-weight: 500;
  --bio-line-height: 1.5;

  --group-title-size: 14px;
  --label-size: 14px;
  --label-weight: 500;

  /* Colors ---------------------------------------------------------------- */
  --profile-background: #000000;
  --desktop-frame-color: color-mix(in srgb, #000000 88%, #ffffff 12%);
  --body-text: #f8f8f8;

  /* Link cards ("glass" style) -------------------------------------------- */
  --button-text: #ebebeb;
  --button-background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    rgba(255, 255, 255, 0.1);
  --button-shadow: 0 0 8px rgba(0, 0, 0, 0.02);
  --button-radius: 28px;
  --button-radius-inner: min(
    var(--button-radius),
    max(4px, calc(var(--button-radius) - 8px))
  );

  /* Layout ---------------------------------------------------------------- */
  --link-gap: 14px;
  --profile-width: 580px;
  --profile-radius: 1.5rem;
  --desktop-offset: 2.5rem;
  --banner-height: 186px;
  --avatar-size: 96px;
}

@media (min-width: 576px) {
  :root {
    --group-title-size: 16px;
    --label-size: 16px;
  }
}