/* theme5 — "Pill" (UX-031)
 * Green-tinted ground, deep forest accent, and the preset's signature kept: the
 * social rows are full-width SOLID pills rather than outlined cards.
 *
 * The pills were `background-color: var(--color1)` with `#ffffff` text — an
 * owner-chosen fill under fixed white, i.e. a control whose legibility depended
 * on a colour picker. On a light --color1 the label disappeared. They are
 * --accent under --on-accent now: one declared pair, measured at 6.13:1 in the
 * report's table, and the same pair every other control on the page uses. */
:root {
  --bg-page: #eef2ef;
  --panel: #ffffff;
  --chip: #e9f0ec;
  --line: #dfe7e2;

  --ink-1: #111a15;
  --ink-2: #4b574f;
  --ink-3: #56635a;

  --accent: #16703f;
  --accent-soft: #e7f3ec;
  --on-accent: #ffffff;

  --bar-bg: #111a15;
  --bar-ink: #ffffff;
  --overlay-bg: #070d0a;

  --radius-panel: 22px;
}

/* THE SIGNATURE. */
.link {
  border-radius: var(--radius-pill);
  border: none;
  background: var(--accent);
  box-shadow: 0 3px 10px -3px rgba(17, 26, 21, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  padding: 6px 20px;
}

.link:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -6px rgba(17, 26, 21, 0.4);
}

.linktitle {
  color: var(--on-accent);
  font-weight: 600;
}

.linkdescription {
  color: var(--on-accent);
}

/* The icon keeps a light disc so a coloured brand glyph still reads against the
 * solid accent fill. */
.linkicon {
  background: #ffffff;
  border-radius: 50%;
  padding: 5px;
  max-width: 36px;
}