@layer components{.btn,.button{display:inline-flex;justify-content:center;align-items:center;gap:var(--space-2);min-width:44px;min-height:44px;min-block-size:44px;min-inline-size:44px;padding:var(--space-2) var(--space-4);font-family:var(--font-body);font-size:var(--text-btn);font-weight:var(--font-semibold);line-height:1.3;color:var(--text-on-purple);background:linear-gradient(135deg,var(--purple-700),var(--purple-600));border:0;border-radius:var(--radius-md);box-shadow:var(--shadow-purple-sm);cursor:pointer}.btn--pill{border-radius:var(--radius-full)}.btn--outline{color:var(--purple-700);background:0 0;border:2px solid var(--purple-700);box-shadow:none}@media (hover:hover) and (pointer:fine){.btn:hover,.button:hover{box-shadow:var(--shadow-purple-md);transform:translateY(-1px)}}}a.btn:where(:not(.btn--outline,.btn-light,.btn-ghost,.btn-secondary,.btn-primary,.btn-outline)),a.button{color:var(--text-on-purple)}a.btn--outline{color:var(--purple-700);border:2px solid var(--purple-700)}