/* Shared public-site theme tokens. Components opt in individually; do not
   alias the legacy --accent or recolor page surfaces when extending usage. */
:root {
  --blog-primary: #477b5d;
  --blog-primary-soft: #edf4ef;
  --blog-primary-border: #d4e3d8;
}

[data-theme="dark"] {
  --blog-primary: #b1cfba;
  --blog-primary-soft: #26372b;
  --blog-primary-border: #3b5845;
}

/* One shared selection style for the sidebar on every public page. */
.blog-shell .sidebar .side-nav a.active { background: transparent; }
.blog-shell .sidebar .side-nav a.active .icon { color: var(--blog-primary); }
.blog-shell .sidebar .side-nav a.active::before { display: block; background: var(--blog-primary); }

/* Hover is a lightweight color cue, not a second selected menu. */
.blog-shell .sidebar .side-nav a:is(:hover, :focus-visible) { color: var(--blog-primary); background: transparent; }
.blog-shell .sidebar .side-nav a:is(:hover, :focus-visible) .icon { color: var(--blog-primary); }
.blog-shell .sidebar .side-nav a:focus-visible { outline-color: var(--blog-primary); }

@media (max-width: 760px) {
  /* Keep the left-hand dot inside the horizontally scrollable mobile menu. */
  .blog-shell .sidebar .side-nav { padding-inline-start: 10px; scroll-padding-inline: 10px; }
}