/* Buttons. Source: "Buttons" in app/globals.css. */

.btn { border: 1.5px solid var(--ink); border-radius: var(--cc-btn-radius, 999px); font-weight: var(--cc-btn-weight, 700); text-transform: var(--cc-btn-transform, none); letter-spacing: var(--cc-btn-ls, normal); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--cc-btn-fs, 15px); height: var(--cc-btn-h, 52px); padding: 0 var(--cc-btn-px, 30px); transition: background .12s, transform .08s; color: var(--cc-btn-text, var(--white)); background: var(--cc-btn-bg, var(--orange)); white-space: nowrap; }
.btn:hover { background: var(--cc-btn-hover, var(--orange2)); color: var(--cc-btn-text, var(--white)); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn.dark { background: var(--ink); color: var(--card); }
.btn.dark:hover { background: var(--ink2); }
.btn.ghost { background: transparent; border: 1px solid var(--line2); color: var(--ink); font-weight: 600; }
.btn.ghost:hover { background: var(--tan); }
.btn.outline-light { background: transparent; border-color: var(--card); color: var(--card); }
.btn.outline-light:hover { background: var(--slate); }
.btn.sm { height: 40px; font-size: 13.5px; padding: 0 18px; }
.btn.md { height: 44px; font-size: 14px; padding: 0 22px; }
.btn.block { width: 100%; }