:root {
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 16px;
}

:root {
  --color-text: #313a40;
  --color-text-light: #545f66;
  --color-text-muted: #6e767b;

  --color-background: #fbfcfc;
  --color-background-alt: #f2f4f5;

  --color-border: #e4e7e9;
  --color-border-light: #eef1f2;

  --color-link: #2f6e64;      /* boosted teal */
  --color-link-hover: #313a40;

  --color-accent: #2f6e64;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #e3e8eb;
    --color-text-light: #b8c1c7;
    --color-text-muted: #9da6ab;

    --color-background: #1f2529;
    --color-background-alt: #2a3136;

    --color-border: #3e474d;
    --color-border-light: #31393e;

    --color-link: #91c9b7;     /* brighter teal */
    --color-link-hover: #e3e8eb;

    --color-accent: #91c9b7;
  }
}

blockquote {
  color: var(--color-text-light);
  background-color: var(--color-background-alt);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-medium);
}

/* =========================
    Title
   ========================= */
.site-title a {
  background: linear-gradient(45deg, var(--color-text), var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-weight: 700;
}
.site-title a:hover {
  background: none;
  -webkit-text-fill-color: var(--color-accent);
  text-fill-color: var(--color-accent);
}

/* =======================================
   Avatar
   ======================================= */
.title-avatar {
  width: var(--touch-target-height);
  height: var(--touch-target-height);
  border-radius: var(--radius-medium);
  border: 1px solid var(--color-border-light);
  object-fit: cover;
  /* Add a smooth transition for the hover effect */
  transition: border-color var(--transition-fast);
}

/* Change the border to the green accent color on hover */
.title-avatar:hover {
  border-color: var(--color-accent);
}