/* components/button.css */

/* Base button style (works for <a class="button"> and <button class="button">) */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background-color: #A88CC8;
    color: white;
    border: none;

    padding: 10px 16px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;

    text-decoration: none;
    line-height: 1.1;
}

/* Hover */
.button:hover {
    background-color: #9567c9;
}

/* Optional: full width button (use when you want it) */
.button--block {
    width: 100%;
}

/* Danger variant (used for delete actions) */
.button--danger {
    background: #b32626;
    border-color: #b32626;
    color: white;
}

.button--danger:hover {
    background: #8f1e1e;
    border-color: #8f1e1e;
}

/* Secondary / neutral button (optional future use) */
.button--secondary {
    background: transparent;
    color: #A88CC8;
    border: 1px solid #A88CC8;
}

.button--secondary:hover {
    background: rgba(168, 140, 200, 0.12);
}

/* Danger button */
.button--danger {
    background: #c23a3a;
    border-color: #c23a3a;
    color: white;
}

.button--danger:hover {
    background: #a52f2f;
    border-color: #a52f2f;
}

/* Icon-style square button (for X, etc.) */
.button--icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-weight: bold;
    line-height: 1;
}