.btn{--btn-bg:var(--button-ground);--btn-fg:var(--button-ink);position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:var(--button-gap);min-block-size:var(--button-md);padding:var(--s1) var(--button-pad);border:var(--stroke) solid var(--button-line);border-radius:var(--btn-radius);background:var(--btn-bg);color:var(--btn-fg);font-family:inherit;font-size:var(--button-type);font-weight:var(--button-weight);line-height:var(--button-leading);text-decoration:none;cursor:pointer;backdrop-filter:blur(var(--button-blur));-webkit-backdrop-filter:blur(var(--button-blur))}
.btn--secondary{--btn-bg:transparent}.btn--ghost{--btn-bg:transparent;border-color:transparent}
.btn--sm{min-block-size:var(--button-sm);padding-block:var(--zero)}.btn--lg{min-block-size:var(--button-lg)}
.btn:focus-visible{outline:var(--focus-width) solid var(--brand);outline-offset:var(--focus-offset)}
.btn svg{inline-size:var(--button-arrow-size);block-size:var(--button-arrow-size)}
.on-dark{--button-ink:var(--button-dark-ink);--button-line:var(--button-dark-line);--button-ground:var(--button-dark-ground);--button-hover-ground:var(--button-dark-hover)}
.on-dark .btn:focus-visible{outline-color:var(--sage)}

/* Filled primary and the existing large size belong to the shared button system. */
/* Buttons use the deep green #1B2D23 (--olive); the logo keeps its own brand green. */
.btn--primary{--btn-bg:var(--olive);--btn-fg:var(--ivory);border-color:var(--olive)}
.on-dark .btn--primary{--btn-bg:var(--ivory);--btn-fg:var(--forest);border-color:var(--ivory)}
.btn--lg{font-size:var(--button-type-lg);padding-inline:var(--button-pad-lg)}