.c-btn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 24px; border: 1px solid transparent; border-radius: var(--r-xl); font-family: var(--font-ui); font-size: 14px; font-weight: 500; line-height: 20px; text-decoration: none; white-space: nowrap; }
.c-btn { position: relative; transition: background-color .3s var(--ease-ui), color .3s var(--ease-ui), border-color .3s var(--ease-ui), box-shadow .3s var(--ease-ui), transform .15s var(--ease-ui); }
.c-btn::before { transition: opacity .3s var(--ease-ui); }
.c-btn--glass { color: var(--c-white); background: rgba(129, 20, 45, 0); }
.c-btn--light { color: #000; background: rgba(129, 20, 45, 0); }
.c-btn--glass::before, .c-btn--light::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.08) 60%, rgba(255,255,255,.3)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.c-btn--light::before { background: linear-gradient(135deg, rgba(0,0,0,.45), rgba(0,0,0,.08) 60%, rgba(0,0,0,.3)); }
.c-btn--red { color: var(--c-white); background: var(--c-crimson); }
.c-btn--lg { padding: 12px 24px; }
/* Hover/focus: fill with the theme wine colour, white text, outline ring fades out. Reusable on any .c-btn variant. */
@media (hover: hover) { .c-btn--glass:hover, .c-btn--light:hover { color: var(--c-white); background-color: var(--c-crimson); } .c-btn--red:hover { background-color: var(--c-crimson-hover); } .c-btn--glass:hover::before, .c-btn--light:hover::before { opacity: 0; } }
.c-btn--glass:focus-visible, .c-btn--light:focus-visible { color: var(--c-white); background-color: var(--c-crimson); outline: 2px solid var(--c-white); outline-offset: 2px; }
.c-btn--red:focus-visible { background-color: var(--c-crimson-hover); outline: 2px solid var(--c-white); outline-offset: 2px; }
.c-btn:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .c-btn, .c-btn::before { transition: none; } .c-btn:active { transform: none; } }