:root {
  --brand: #cf1844;
  --brand-2: #f03a67;
  --text: #0a0a0a;
  --muted: #374151;
  --border: #d1d5db;
  --bg: #fff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1020;
    --text: #e6edf6;
    --muted: #9fb0c7;
    --border: #24324d;
  }
}

.c-lang {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 9999px; /* buttons can be rounded per your rule */
  overflow: hidden;
  background: var(--bg);
}

.c-lang__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 700;
  color: var(--text);
  background: var(--bg);
  border-right: 1px solid var(--border);
  line-height: 1;
  transition: transform .12s ease, background .12s ease;
}

.c-lang__btn--md { padding: 0.6rem 0.9rem; font-size: 0.95rem; }
.c-lang__btn--sm { padding: 0.45rem 0.75rem; font-size: 0.875rem; }

.c-lang__btn.is-last { border-right: 0; } /* last segment no divider */

@media (prefers-color-scheme: dark) {
  .c-lang__btn:hover,
  .c-lang__btn:focus-visible {
    background: #232426;
    outline: 3px solid transparent;
  }
}

@media (prefers-color-scheme: light) {
  .c-lang__btn:hover,
  .c-lang__btn:focus-visible {
    background: #c3c4c6;
    outline: 3px solid transparent;
  }
}

.c-lang__btn.is-active {
  color: #fff;
  /* 3D/gradient to match the primary pill */
  background-color: var(--brand);
  border: none;
}

.c-lang__label { letter-spacing: .25px; }