@layer components {
    .btn {
        display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
        padding: var(--space-3) 28px; border-radius: var(--radius-md);
        font-size: var(--text-sm); font-weight: 600; cursor: pointer;
        border: none; transition: all var(--transition); text-align: center;
    }
    .btn-primary { background: var(--primary-600); color: var(--bg); }
    .btn-primary:hover { background: var(--primary-700); color: var(--bg); transform: translateY(-1px); box-shadow: var(--shadow-md); }
    .btn-gold { background: var(--gold-500); color: var(--primary-800); }
    .btn-gold:hover { background: var(--gold-600); color: var(--primary-800); transform: translateY(-1px); box-shadow: var(--shadow-md); }
    .btn-outline { border: 2px solid var(--primary-600); color: var(--primary-600); background: transparent; }
    .btn-outline:hover { background: var(--primary-600); color: var(--bg); }
    .btn-white { background: var(--bg); color: var(--primary-700); }
    .btn-white:hover { background: var(--primary-50); color: var(--primary-600); transform: translateY(-1px); }
    .btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }
    .btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
}