/* Buttons - no hardcoded colours, everything comes from tokens.css */
.btn { font-weight: 500; border-radius: var(--brand-radius-sm); padding: 0.5rem 0.95rem; transition: all .15s ease; }
.btn-sm { padding: 0.32rem 0.7rem; font-size: 0.8rem; }
.btn-lg { padding: 0.7rem 1.2rem; font-size: 0.95rem; }

.btn-primary { background: var(--brand-primary); border-color: var(--brand-primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--brand-primary-900); border-color: var(--brand-primary-900); }
.btn-outline-primary { border-color: var(--brand-primary); color: var(--brand-primary); }
.btn-outline-primary:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.btn-warning { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--brand-on-accent); }
.btn-warning:hover { background: var(--brand-accent-600); border-color: var(--brand-accent-600); color: #fff; }

/* Soft variants: one rule per colour, dark mode handled by the tokens */
.btn-soft-primary { background: var(--brand-soft-primary-bg); color: var(--brand-soft-primary-fg); }
.btn-soft-success { background: var(--brand-soft-success-bg); color: var(--brand-soft-success-fg); }
.btn-soft-warning { background: var(--brand-soft-warning-bg); color: var(--brand-soft-warning-fg); }
.btn-soft-danger  { background: var(--brand-soft-danger-bg);  color: var(--brand-soft-danger-fg); }
.btn-soft-info    { background: var(--brand-soft-info-bg);    color: var(--brand-soft-info-fg); }
.btn-soft-primary:hover { background: var(--brand-primary-100); color: var(--brand-primary-900); }
html.theme-dark .btn-soft-primary:hover { background: rgba(99,102,241,0.3); color: #fff; }

.btn-icon { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--brand-radius-sm); }
.btn-icon.btn-sm { width: 30px; height: 30px; }
.btn-icon.btn-lg { width: 44px; height: 44px; }

.btn-ghost { background: transparent; color: var(--brand-text-muted); border: 1px solid transparent; }
.btn-ghost:hover { background: var(--brand-border-soft); color: var(--brand-text); }
html.theme-dark .btn-outline-primary { color: var(--brand-sidebar-text); border-color: var(--brand-border); }
html.theme-dark .btn-outline-primary:hover { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--brand-on-accent); }