.published-container {
  --page-width: 800px;
  --page-side-padding: 48px;
  --page-title-size: 2rem;

  /* Warm amber accent */
  --accent-h: 38;
  --accent-s: 80%;
  --accent-l: 52%;

  --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
  --text-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
  --text-accent-hover: hsl(
    var(--accent-h),
    var(--accent-s),
    calc(var(--accent-l) - 8%)
  );
}

.markdown-rendered a {
  color: var(--color-accent);
  background-size: 0px !important; /* removes default hover underline */
  text-decoration: none; /* optional */
  transition: color 0.3s ease, background-size 0.3s ease;
}

.markdown-rendered a:hover {
  color: var(--text-accent-hover);
  background-size: 0px !important;
}


.markdown-rendered img {
  border-radius: 5px;
}

.markdown-rendered img,
.image-embed img {
  border-radius: 5px;
}

.markdown-rendered img {
  border-radius: 5px;
  overflow: hidden;
}

.markdown-rendered a.external-link {
  color: var(--color-accent);
  background-size: 0px !important; /* overrides any existing background */
  text-decoration: none; /* optional, remove underline if desired */
}

.markdown-rendered a.external-link:hover {
  color: var(--text-accent-hover);
  background-size: 0px !important;
}


  
/* ... CSS variables for Publish that do not change when light or dark mode is enabled. They sometimes link to color variables in .theme-light or .theme-dark */


.theme-light {
  --background-primary: #fcf5e4;
  --h1-color: #2e2a24;
  --text-normal: #2e2a24;
  --text-muted: #6f6a60;
  --text-faint: #9a958a;
 
}



/* DARK MODE */

.theme-dark {
  --background-primary: #262626;
  --h1-color: #e2d7c3;
  --text-normal: #e2d7c3;
  --text-muted: #b8b0a1;
  --text-faint: #9e978b;

}