:root {
    /* Brand */
    --color-primary: #3B82F6;
    --color-secondary: #CCFBF1;
    --color-white: #F9FAFB;

    /* Surfaces */
    --rk-shadow-card: 0 10px 24px rgba(0,0,0,.08);
    
    --color-text-primary: #F9FAFB;
    --color-text-secondary: #111827;

    --btn-primary: #3B82F6;
    --btn-primary-hover: #2563EB;
    --btn-primary-active: #1D4ED8;
    --btn-primary-text: #FFFFFF;

    --btn-secondary: #E5E7EB;        /* slate-200 */
    --btn-secondary-hover: #D1D5DB;  /* slate-300 */
    --btn-secondary-active: #9CA3AF; /* slate-400 */

    --btn-danger-soft: #b9424f;
    --btn-danger-soft-hover: #a33945;
    --btn-danger-soft-active: #8f2f3a;
}

.btn-primary {
    padding: 12px 14px;
    border-radius: 14px; /* net iets ronder dan login-input */
    border: none;
    cursor: pointer;
    background: var(--btn-primary);
    color: var(--color-text-primary);
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 160ms ease, transform 120ms ease;
}

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

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

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

.btn-primary--icon {
    background: transparent;
    color: var(--btn-primary);
    padding: 10px;
    border-radius: 12px;
}

    .btn-primary--icon:hover {
        background: transparent;
    }

    .btn-primary--icon:active {
        background: transparent;
    }

    .btn-primary--icon:focus,
    .btn-primary--icon:focus-visible {
        background: transparent;
        outline: none;
        box-shadow: none;
    }

.btn-secondary {
    padding: 12px 14px;
    border-radius: 14px; /* net iets ronder dan login-input */
    border: none;
    cursor: pointer;
    background: var(--btn-secondary);
    color: var(--color-text-secondary);
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 160ms ease, transform 120ms ease;
}

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

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

    .btn-primary--ghost:active,
    .btn-secondary--ghost:active {
        transform: translateY(1px) scale(0.98);
    }

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

.btn-household-leave {
    padding: 12px 14px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    background: var(--btn-danger-soft);
    color: #fff;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 160ms ease, transform 120ms ease;
}

    .btn-household-leave:hover {
        background: var(--btn-danger-soft-hover);
    }

    .btn-household-leave:active {
        transform: translateY(1px) scale(0.98);
        background: var(--btn-danger-soft-active);
    }

    .btn-household-leave:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }