/* Reusable button styles (plain CSS so no Tailwind build step needed here) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    border-radius: 0.375rem;
    /* rounded */
    transition: background-color .2s, color .2s, border-color .2s;
    line-height: 1.25rem;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    user-select: none;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    white-space: nowrap;
    /* keep multi-word labels (e.g., 'Continue Coding') on one line */
}

.btn:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, .5);
    /* default ring color */
}

.btn-xs {
    font-size: .75rem;
    padding: .25rem .5rem;
}

.btn-sm {
    font-size: .875rem;
    padding: .375rem .75rem;
}

.btn-md {
    font-size: .875rem;
    padding: .5rem 1rem;
}

.btn-lg {
    font-size: 1rem;
    padding: .625rem 1.25rem;
}

/* Color variants */
.btn-blue {
    background: #93c5fd;
    color: #111827;
}

.btn-blue:hover {
    background: #60a5fa;
}

.btn-blue:focus {
    background: #60a5fa;
}

.btn-sky {
    background: #0ea5e9;
    color: #fff;
}

.btn-sky:hover {
    background: #0284c7;
}

.btn-sky:focus {
    background: #0284c7;
}

.btn-emerald {
    background: #10b981;
    color: #fff;
}

.btn-emerald:hover {
    background: #059669;
}

.btn-emerald:focus {
    background: #059669;
}

.btn-purple {
    background: #a855f7;
    color: #fff;
}

.btn-purple:hover {
    background: #9333ea;
}

.btn-purple:focus {
    background: #9333ea;
}

.btn-red {
    background: #ef4444;
    color: #fff;
}

.btn-red:hover {
    background: #dc2626;
}

.btn-red:focus {
    background: #dc2626;
}

.btn-yellow {
    background: #facc15;
    color: #111827;
}

.btn-yellow:hover {
    background: #eab308;
}

.btn-yellow:focus {
    background: #eab308;
}

.btn-outline {
    background: transparent;
    border: 1px solid #d1d5db;
    color: #374151;
}

.btn-outline:hover {
    background: #f3f4f6;
}

.btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}