/* Explain: Reusable components like buttons, cards, and page headers. - */
.btn-primary {
    min-height: 3rem;
    border-radius: var(--radius-soft);
    background: var(--primary-color);
    color: var(--white);
    padding-inline: 1.75rem;
    transition: all 300ms ease;
    cursor: pointer;
    border: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--primary-hover);
    transform: translateY(-2px);
    color: var(--white);
}

.btn-secondary {
    min-height: 3rem;
    border-radius: var(--radius-soft);
    background: var(--secondary-color);
    color: var(--white);
    padding-inline: 1.75rem;
    transition: all 300ms ease;
    cursor: pointer;
    border: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    background: var(--sage-hover);
    transform: translateY(-2px);
    color: var(--white);
}

.btn-outline {
    min-height: 3rem;
    border-radius: var(--radius-soft);
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding-inline: 1.75rem;
    transition: all 300ms ease;
    cursor: pointer;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-outline:hover,
.btn-outline:focus-visible {
    background: var(--primary-color);
    color: var(--white);
}

.card-clean {
    background: var(--surface-color);
    border-radius: var(--radius-soft);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-color);
    padding: 2rem;
    transition: all 300ms ease;
}

.card-clean:hover {
    box-shadow: var(--shadow-soft);
    transform: translateY(-4px);
}

.page-header {
    background: linear-gradient(135deg, var(--petrol) 0%, #2A6B82 100%);
    color: var(--white);
}