/* === Buttons & Link-Buttons ===
 * Extracted from course.css, contest.css, event.css, profile.css
 * Common patterns for action links styled as buttons.
 */

/* ── Base link-button ──────────────────────── */
.link-btn {
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 600;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-normal);
}

.link-btn:hover,
.link-btn:focus-visible {
    color: var(--color-accent);
}

.link-btn--active {
    color: var(--color-primary);
}

/* ── Action button ─────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast) var(--ease-out);
    position: relative;
    overflow: hidden;
}

.btn:hover {
    transform: translateY(-1px);
}
.btn:active {
    transform: translateY(0) scale(0.98);
}

.btn--primary {
    background: var(--color-accent);
    color: var(--color-white);
}
.btn--primary:hover {
    background: var(--color-accent-hover);
}
.btn--primary:active {
    background: var(--color-accent-active);
}

.btn--secondary {
    background: var(--color-primary);
    color: var(--color-white);
}
.btn--secondary:hover {
    background: var(--color-primary-hover);
}

.btn--outline {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary-border);
}
.btn--outline:hover {
    background: var(--color-primary-bg);
}

.btn--danger {
    background: var(--color-error);
    color: var(--color-white);
}

/* ── Sizes ──────────────────────────────────── */
.btn--sm  { padding: 4px 12px; font-size: var(--text-sm); }
.btn--lg  { padding: 12px 28px; font-size: var(--text-lg); }

/* ── Full-width variant ────────────────────── */
.btn--full { width: 100%; }